标签：module get 提交 code == ret time 了解 settime
Modules：可以定义新的模块
官方上说，当我们的应用变的非常复杂时，store对象就有可能变得相当臃肿
为了解决这个问题，Vuex允许我们将store分割成模块（Module），
在这里，每个模块都拥有自己的state、mutations、actions、getters等
写个例子吧：
首先我们来声明一个module，起个名字就叫做moduleA吧
const moduleA={
state:{},
mutations:{},
getters:{},
actions:{}
}
const store = new Vuex.Store({
state:{},
mutations:{},
actions:{},
getters:{},
modules:{
a:moduleA
}
})
从上面的代码可以得知， const store = new Vuex.Store({}) 是根(root)
那么在const moduleA就是我们分离出去的模块了，下面我们在moduleA中的state写一条数据，看看它是如何被使用的
const moduleA = { state:{ name:"张三" } } const store = new Vuex.Store({ modules:{ a:moduleA } }) 在组件页面引用时,如App.vue页面中引用时， <h1>{{$store.state.a.name}}</h1>
可以看到，我们调用的还是根的state，但是我们定义的a：moduleA ,将我们在moduleA中的state以a的形式给添加到了根的state中去，
所以我们要使用$store.state.a.name 来获取moduleA模块中state中的数据
在moduleA这模块中的getter可以有三个参数：
const moduleA = {
getters：{
fullName(state){
//第一个参数：state==》指向当前模块中的state
//返回内容是state中的name拼接上111
return state.name + ‘111‘
},
fullName2(state,getters){
//第二个参数：getters====》可以引用该模块中的其他gettes方法
//返回内容：先获取到fullName返回的内容再拼接上222
return getters.fullName + ‘222‘
},
fullName3(state,getters,rootState){
//第三个参数rootState====>根上边的state
//返回内容：先获取到fullName2返回的内容再拼接上 根上边的state中的count
return getters.fullName2 + rootState.count
}
}
}
在moduleA这模块中的actions中的参数context(上下文)指向问题
const moduleA = {
actions:{
aUpdName(context){ //context： 上下文的意思
setTimeout(()=>{
//参数‘UpdName‘ 是mutations中的方法名，李四：是传递去的参数
context.commit(‘UpdName‘,‘李四‘) //这里的context.commit()方法只提交给当前模块中的mutations中去，也就是说模块里的context指向模块中的mutation
},1000)
}
}
}
至于在moduleA这个分离出来的模块中mutations的使用方法，跟分离前是一样的
标签：module get 提交 code == ret time 了解 settime
原文地址：https://www.cnblogs.com/a973692898/p/12849579.html
