本文共 2544 字，大约阅读时间需要 8 分钟。

前言

最近在做练手项目时，把vuex分模块进行了管理。但是对于语法的不熟悉，导致漏洞百出。这两天结合了vuex的官方文档，操作了一下分模块下，如何读取state、getters、actions等，如下是记录过程。

为什么分模块

之前看的代码，是把所有state、getters、actions写在一个文件，由于项目较大，感觉逻辑有点乱，于是可以利用分模块的办法，給每一个模块单独的state、getters、actions等，从而使得逻辑结构清晰。

案例代码

说明

如下图所示，我主要是分了两个模块a、b，分别在vue组件里测试了下面四种情况，一般来说不会通过a模块去修改b模块的。再用语法糖…mapGetters、…mapState、…mapActions分别访问。

import actions from './actions'import state from './state'import getters from './getters'import mutations from './mutations'export default {
     // 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应，指定命名空间可以  // 如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名  namespaced: true,  state,  actions,  getters,  mutations}// 向外暴露对象，可以自定义名字接收 export default

最外层的index.js内容如下：

import Vue from 'vue'import Vuex from 'vuex'import moduleA from './moduleA/index'import moduleB from './moduleB/index'Vue.use(Vuex) // 注册插件export default new Vuex.Store({
     modules: {
       a: moduleA,    b: moduleB  }})

①访问state的两种方式

computed: {
       // state的两种获取方法    ...mapState({
         stateB: (rootState) => rootState.b.stateB    }),    stateA: function () {
         return this.$store.state.a.stateA    }, }

②访问getters的两种方式

computed: {
       // getters的两种获取方法    ...mapGetters('b', {
         getStateB: 'getStateB' // 调用b模块下的getStateB并映射为getStateB计算属性    }),    getStateA: function () {
         return this.$store.getters['b/getStateA'] // 也可通过this.$store.getters方法调用计算属性，同时映射计算属性    }  },

③访问actions的两种方式

methods: {
       // actions的两种获取方法    ...mapActions('b', {
         changeStateB: 'changeStateB', // 把b模块下的该方法映射为changeStateB()，可以用个this.$store.dispatch      changeStateAB: 'changeStateAB'    }),    changeStateBB () {
         return this.$store.dispatch('b/changeStateB')    }  }

④a模块修改b模块的state两种方式【moduleB/actions.js】

export default {
     changeStateB (context) {
       const newStateB = context.state.stateB + 1    context.commit('changeB', {
    newStateB })  },  changeStateAB ({
    state, commit, rootState }) {
    // context可以解析出state，commit，rootState    const newStateB = state.stateB + 1000    commit('changeB', {
    newStateB })    const newStateA = rootState.a.stateA + 'aaaaaa' // 一般不直接改变state，而是通过action->mutaion去改变    commit('a/changeA', {
    newStateA }, {
    root: true }) // 可以设置root=true，即可访问到其他模块的action，默认是b模块下mutations里面的函数名称  }}

总结

官方文档还有一些模块重用、模块注册以及命名空间的具体用法，感兴趣的小伙伴可以自行研究。谨以此记录vuex分模块的用法，若有不足，还请多多指教！

转载地址：https://blog.csdn.net/qq_39811414/article/details/109055666 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！