vuex
中的module
使用的是单一状态树,应用的所有的状态都会集中到一个比较大的对象中,当应用变得非常复杂时,store
就会变得非常臃肿。为了解决以上问题,vuex
允许我们将store
分割成模块,每一个模块都拥有自己的state
,mutation
,action
,getter
,甚至嵌套子模块。
一、module的基本使用
二、modules的局部状态参数
子模块中的getters中的参数
子模块中的mutations中的参数
如上图所示,子模块中mutations
中存在两个参数,一个是当前模块对象的state
对象,另一个是调用该函数的参数。
子模块的actions对象
如上图所示,在子模块中actions
中存在两个参数,一个是context
,另一个是传入的参数payload
。
第一个参数context
是一个对象,其中包含了commit
,dispatch
,getters
,rootGetters
, state
,rootState
。
三、module的命名空间
如上图所示,我们存在一个root
模块,两个子模块,分别为home
,about
,此时三个模块中都存在方法increment
和异步方法incrementAsync
,当我们点击按钮时,此时三个模块的都会发生改变。原因是当点击按钮时,三个同名函数都会执行,我们也可以理解为子模块的mutation
的方法注册在全局空间。actions
也是同样的道理。对于getters
来说,如果子模块中的getters
和父模块的getters
出现冲突的问题,从图上可以知道,会使用root
下的来替换。
namespaced
:我们可以在子模块中设置namespaced
为true
,也就是设置局部命名空间。
如上图所示,此时就解决了root
模块和子模块
之间getters
,mutations
,actions
之间的冲突问题。
四、module修改或者派发组件
我们希望在actions
中修改root
中的state
,可以使用如下所示
五、module的辅助函数
关于module
的辅助函数存在三种写法。
方法一
方法二
方法三:使用createNamespacedHelpers
六、在setup中使用createNamespacedHelpers
上面为封装的代码。