vuex之modules

modules

如果不拆分对应模块，那么未来store中的相关内容会变得臃肿。所以我们可以把不同的组件的数据拆分成不同的模块。

命名空间

建议给所有的模块都添加命名空间

namespaced: true

const store = new Vuex.Store({
  state: {},
  modules: {
    moduleName: {
      namespaced: true
    }
  }
})

添加命名空间后，我们的mutation和action都会变成 模块名/对应名字

setName —> moduleName/setName

当我们添加了命名空间后，mapState、mapMutations、mapActions的用法就会发生响应的改变

模块中的相关属性的操作

{
  ...mapState('模块名', ['模块中state的属性名']),
  ...mapMutations('模块名', ['模块中的mutation的名字']),
  ...mapActions('模块名', ['模块中的action的名字'])
}

action

分发actions的操作变成了this.$store.dispatch('moduleName/actionName')

action中进行commit操作

在action中及那行commit操作时，只能commit当前模块中的mutation，不需要添加模块名

如果我们需要去提交其他模块或者root中的mutation时，需要设置第三个参数{root: true}

commit('moduleName/mutation名字', payload, {root: true})

mutation

提交mutation的操作变成了this.$store.commit('moduleName/mutationName')

默认情况，mutation中只能去获取到当前模块中的属性。