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