1，當vue 項目比較復雜，多人之間相互協作開發，vuex管理著不同分類項的state,這里以用戶(user),商品(good)來做區分，如何項目有還有許多的話，如果還是以單一存放在state里管理，那么代碼看起來會非常雜亂，后期維護起來會困難，那么就要引用vuex 的模塊的概念，給不同類別的下的state,getter....等劃分一個唯一的命名空間，在開發時就根據對應的namespace
2. 這里以vue-cli 構建的項目目錄為例
（1） 在 src 目錄下新建store 文件夾，在store 文件新建 index.js 作為vuex 的導出的文件，注入main.js中，
(2)
在store 下新建model 文件夾，統一存放，在model文件夾下 新建 user.js 文件，如下
// model/user.js
const state={
userName:"haha"
}
const getters={
getUser(state){
return state.userName
}
}
const mutations={
setName(state,name){
state.userName=name
}
}
const actions={
asyncsetName({commit},name){
commit('setName',{
name:name
})
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve(12345)
}, 1000);
})
}
}
const modelUser={
state:state,
getters:getters,
mutations:mutations,
actions:actions
}
export default modelUser
以上代碼建立了 user 的store,good 的建立也是如此，參照即可
在store/index.js 引入user.js 導出的模塊
//store/index.js
import moduleUser from './model/user'
import modelGood from './model/goods'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
modules:{
moduleUser:Object.assign({},{ //user 用戶store
namespaced: true,
}, moduleUser),
modelGood:Object.assign({},{ //good store
namespaced: true,
}, modelGood),
}
})
export default store
接下來把創建的store導入到main.js ,注入項目中
import App from './App' import router from './router' import store from './store/index' Vue.config.productionTip = false console.log(store) /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
3,接下來就是在 .vue 文件中去獲取store 數據
import { mapState,mapGetters,mapActions, mapMutations} from 'vuex'
computed:{
...mapState({
userName:state=>state.moduleUser.userName //modeuleUser
}),
...mapGetters({
getUser:'moduleUser/getUser',
getGood:'modelGood/getGood' //modelGood
})
},
浙公網安備 33010602011771號