Vuex 核心属性(下)

Posted a973692898

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex 核心属性(下)相关的知识,希望对你有一定的参考价值。

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的使用方法,跟分离前是一样的

 

以上是关于Vuex 核心属性(下)的主要内容,如果未能解决你的问题,请参考以下文章

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vuex的五个核心属性

使用特定对象而不是对象属性获取核心数据