Vuex4.x（五）模块管理（上）
module 的用法
一开始以为模块只能是一层，仔细看了官网才发现，原来模块还可以有n层，即子模块、子子模块、子子子模块无穷匮也。而且还可以动态注册模块。这是要疯的节奏呀。
我还是感觉模块应该扁平化设计，最多两层，多了就容易乱套，理解起来也费劲。
定义模块
const user = {
// namespaced: true, // 避免重名
state: () => ({
userInfo: {
userId: 123,
userCode: '',
userNick: ''
},
userRole: []
}),
mutations: {
setUser(state, code) {
state.userInfo.userCode = code
}
},
getters: {
getUser(state) {
return state.userInfo
}
},
actions: {
// { state, commit, rootState }
setUsera (store, code) {
store.commit('setUser', code)
}
}
}
export default user
state
这里有点变化，需要用返回函数的方式，原因和组件里的data的原因类似。这样也就意味着一个模块可以被多次加载进来。
- 访问方式
const userInfo = store.state.user.userInfo
getter
简单的说，没啥变化，传递进来的state只包含自己模块的state。
- 访问方式
const userInfo2 = store.getters.getUser
031getter的state参数.png
mutations
简单的说，也是没啥变化，传递进来的state只包含自己模块的state，另一个参数是组件调用时传递进来的参数。
- 访问方式
store.commit('setUser', '要修改的数据')
030setter的state参数.png
action
简单的说呢，也是只需要操作自己的模块的就行。
-
store
这个参数是一个比较复杂的对象，全部成员如下图，一般可以用结构的方式获取需要的参数，比如这样：{ state, commit, rootState }。
020action的参数store0.png
参数详细内容：
020action的参数store.png
可以依据这些内容实现各种功能。
020action的参数store2.png
-
code
第二个大参数，就是组件调用的时候传递过来的参数。 -
访问方式
store.dispatch('setUsera', '要修改的数据')
加载模块到store
模块代码写好了，如何加入进来呢？其实很方便，可以直接写，也可以挂个别名。
export default Vuex.createStore({
state: {
count: 0,
myObject: {
time: '现在的时间：'
},
myArray: [1,2,2,3,4]
},
getters: {},
mutations: {},
actions: {},
modules: {
// 注意：这个myObject会覆盖掉根的myObject。
// 设置命名空间也没有用，还是会覆盖。
// 所以要避免重名。
myObject: user,
user: user,
person: user
}
})
命名空间
- namespaced: true
简单的说，这个是避免命名重复的问题的。
我们可以把user模块加载三次来看看区别。
不加命名空间
- state
模块的导入名称会和根的 根state的成员 并列，如果重名的话，根的state成员会被覆盖掉。
比如这里根state的成员myObject，就被覆盖掉了。
蓝色框是根的state的成员。
红色框是被覆盖的。
橙色框是两个模块。
005没有命名空间的state.png
-
mutations
会变成数组形式，每个模块的同名都会被调用。
001没有命名空间的setter.png
-
action
也会变成数组的形式，每个模块的同名action都会被调用
002没有命名空间的action.png
-
getter
只会保留一个，另外两个会报错。
004没有命名空间的getter的报错.png
加上命名空间
state不受影响，其他都会加上“路径”作为区分。
-
state
还是那个样子，没有变化。 -
mutations
由斜线分隔组成的路径，这样可以明确区分是哪个模块的函数，不会弄错。
访问方式：
store.commit('user/setUser', 'user的code')
store.commit('myObject/setUser', 'myObject的code')
store.commit('person/setUser', 'person的code')
可以分别给每个模块的state设置内容，那么其实就是一个模块。
006有命名空间的setter.png
- action
也是由斜线区分。
访问方式：
store.dispatch('user/setUsera', 'action的user的code')
008有命名空间的action.png
- getter
也是用斜线分隔开。
访问方式：
store.getters['user/getUser']
因为有斜线，所以需要用字符串的方式来访问。
009有命名空间的getter.png
官网还有更牛叉的功能，我先不说了，头有点疼……
在线演示：
https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/
源码：
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex
