vuex modules

最新推荐文章于 2022-08-01 10:07:23 发布

New globe

最新推荐文章于 2022-08-01 10:07:23 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/w19981225/article/details/108738675

版权

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的名字'])
}

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

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

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

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

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

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

关注