vuex深入学习 ---- Module

最新推荐文章于 2025-04-24 17:46:29 发布

山中何事

最新推荐文章于 2025-04-24 17:46:29 发布

阅读量553

点赞数

分类专栏： Vue vuex 文章标签： vue vuex

本文链接：https://blog.youkuaiyun.com/qq_42731879/article/details/82766065

版权

本文深入探讨了Vuex中的模块化概念，如何分割store以管理大型应用的状态。内容包括模块的局部状态、命名空间、全局与局部操作的交互、动态注册和卸载模块，以及如何处理模块重用和状态持久化。通过模块化，Vuex可以帮助开发者更好地组织和维护复杂应用的状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuex深入学习 — module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象

  const moduleA = {
    state: { count: 0 },
    mutations: {
      increment (state) {
        // 这里的 `state` 对象是模块的局部状态
        state.count++
      }
    },

    getters: {
      doubleCount (state) {
        return state.count * 2
      }
    }
  }

同样，对于模块内部的 action，局部状态通过 context.state 暴露出来
根节点状态则为 context.rootState

 const moduleA = {
    // ...
    actions: {
      incrementIfOddOnRootSum ({ state, commit, rootState }) {
        if ((state.count + rootState.count) % 2 === 1) {
          commit('increment')
        }
      }
    }
  }

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

 const moduleA = {
    // ...
    getters: {
      sumWithRootCount (state, getters, rootState) {
        return state.count + rootState.count
      }
    }
  }

命名空间

最低0.47元/天解锁文章