vuex中的模块是什么？

紫微前端

于 2022-08-04 14:08:11 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/liuhao9999/article/details/126158414

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

Vuex允许将store划分为模块，以解决应用程序状态管理的臃肿问题。每个模块可以拥有独立的状态、突变、动作和getter，支持嵌套。本文通过实例介绍如何在Vuex中配置和访问多个模块。

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

如果您将我们应用程序的所有状态都保持在一个大状态中，那么存储会变得非常臃肿。为了解决这个问题，Vuex 允许我们将 store 划分为模块。在这里，每个模块都可以包含自己的状态、突变、动作、getter，甚至是嵌套模块。

让我们以多个模块为例，在vuex中配置它们并访问不同的模块，

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

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

const store = new Vuex.Store({
  modules: {
    one: moduleOne,
    two: moduleTwo
  }
})

store.state.one // -> `moduleOne's state
store.state.two // -> `moduleTwo's state