VUEX模块化

1.分模块

（1）在store的文件中添加一个js文件

export default {
 
// 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染
namespaced:true,   
 
state:{},
 
mutations:{},
 
getters:{},
 
actions:{},
 
}

（2）在store的index.js中引入

// 引入
import son from './son.js'
 
// 在modules里注册
export default new Vuex.Store({ 
 
 modules: { son, },
 
 })

（3）.在vue中使用

//  state 的使用
 
this.$store.state.模块名.数据名
 
// mutations 的使用
 
this.$store.commit('模块名/模块事件名'，传的数据)
 
// actions 的使用
 
this.$store.dispath('模块名/模块异步事件名')

2.分模块后使用辅助函数

// 引入
 
import {createNamespacedHelpers} from 'vuex'
 
// 定义的不同  mapStateSon为另外定义的命名
 
const {mapState:mapStateSon} = createNamespacedHelpers

 

// mapStateSon为定义的别名
 
...mapStateSon({ })