为什么会有模块化？
由于使用单一状态树，应用的所有状态都会集中在一个比较大的对象，当应用比较复杂时，store对象就会变得臃肿，因此，就有了Vuex模块化
模块化的简单应用
定义两个模块 user 和 setting
user中管理token
setting中管理应用名称name
const store = new Vuex.Store({
modules: {
user: {
state: {
token: '1212'
}
},
setting: {
state: {
name: 'beizi'
}
}
},
<template>
<div>
<div>token:--- {{ $store.state.user.token }}</div>
<div>name:--- {{ $store.state.setting.name }}</div>
<div>1</div>
</div>
</template>
模块化的命名空间
刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用 如
但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置
- 高封闭性？
- 可以理解成 一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了
modules: {
user: {
// 命名空间
namespaced: true,
state: {
token: '1212'
},
mutations: {
// 这里的mutations 是user的
upToken(state) {
state.token = '666'
}
}
},
setting: {
state: {
name: 'beizi'
}
}
},
使用 createNamespacedHelpers 创建基于命名空间的辅助函数
<template>
<div>
<div>token:--- {{ $store.state.user.token }}</div>
<button @click="upToken"> 更改token</button>
<div>name:--- {{ $store.state.setting.name }}</div>
<div>1</div>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {
methods: {
...mapMutations(['upToken'])
}
}
</script>
