modules使用详解

modules使用详解

首先在唯一的store对象里注册modules

modules: {
  a:moduleA
}

然后创建modules

const moduleA = {
  state: {
    name: 'A'
  },
  mutations: {
    updateName(state) {
      state.name = 'qwer'
    }
  },
  getters: {
    fullName(state) {
      return state.name + '111'
    },
    fullName2(state, getters) {
      return getters.fullName + '222'
    },
   /*第三个参数是唯一的store的state内容*/
    fullName3(state, getters, rootState,rootGetters) {
      return getters.fullName2 + rootState.counter + rootGetters.powerCounter
    }
  },
  actions: {
    //这里的context上下文只会取提交自己的mutations，不会去找root的
    aUpdateName(context) {
      setTimeout(() => {
            context.commit('updateName')
      }, 1000)
    }

  }
}

<h2>===========modulesA里的内容=============</h2>
<h2>{{$store.state.a.name}}</h2>
<button @click="updateName">修改名字</button>
<h2>{{$store.getters.fullName}}</h2>
<h2>{{$store.getters.fullName2}}</h2>
<h2>{{$store.getters.fullName3}}</h2>
<button @click="asyncUpdateName">异步修改名字</button>

updateName() {
  this.$store.commit('updateName')
},

asyncUpdateName() {
  this.$store.dispatch('aUpdateName')
}

首先modulesA里的state可以通过可以通过自己的别名a来调用。其实a的state直接被添加到store的state里.

注意modules里的方法名和store里的方法名不要重复。modules里的方法调用和store里的相同，首先会在store里找同名方法，找不到就去modules里找

modules里的getters不仅可以将自己作为参数传递，还可以增加一个rootState参数，这个参数可以直接调用store的state,还可以有第三个参数rootGetters，可以调用store的getters

所以不要有命名冲突。还有一个不同点。

就是modules里的context和store里的不同，他不会去store里找同名方法，他自会在自己的范围内去commit方法名。

同时这个context是一个对象里边不仅有modules里的state/getters,还有rootSatte/rootGetters