vuex 的分模塊管理

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

View Code

 

 

 

接下來把建立的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/>'
})
 

View Code

 

 

 

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
})
},
 
　　　　
 

View Code