Vuex存储初始化：创建模块、状态和突变 (vuex存储数据几种方式)

Vuex 和状态管理

Vuex 是一个状态管理库，用于管理 Vue.js 应用程序中的应用程序级状态。

它提供了集中式存储、状态突变和事件处理，有助于保持大型应用程序的有条理和可维护性。

创建 Vuex 模块

Vuex 模块是组织状态、突变和行为逻辑的独立单元。在初始化 Vuex 存储时，可以创建多个模块，每个模块侧重于应用程序的不同方面。

要创建模块，请在 Vuex.Store 类中使用 module 选项：

import Vuex from 'vuex';const store = new Vuex.Store({modules: {// 创建一个名为 "user" 的模块user: {// 模块状态state: {name: 'John Doe',email: 'john.doe@example.com',},// 模块突变mutations: {updateName(state, newName) {state.name = newName;},updateEmail(state, newEmail) {state.email = newEmail;},},// 模块 getters (可选)getters: {fullName(state) {return `${state.name} ${state.email}`;},},},},
});

定义状态

模块状态是存储在模块中的数据。它通常是一个包含应用程序数据（例如用户详细信息、列表或设置）的对象。

在上面创建的 "user" 模块中，状态定义如下：

state: {name: 'John Doe',email: 'john.doe@example.com',
},

添加突变

突变是改变模块状态的方法。它们是 Vuex 中唯一可以修改状态的方法。

突变必须是同步的，并在提交时接收一个 state 对象。在 "user" 模块中，有以下突变：

mutations: {updateName(state, newName) {state.name = newName;},updateEmail(state, newEmail) {state.email = newEmail;},
},

通过 mapXXX 辅助函数映射状态和突变

为了在 Vue 组件中方便地使用模块状态和突变，可以使用 mapState 和 mapMutations 辅助函数。

mapState 函数返回一个计算属性函数，该函数返回模块的状态作为道具。 mapMutations 函数返回一个包含模块突变的方法对象的道具。

例如，以下代码使用 mapState 和 mapMutations 映射 "user" 模块的 name 状态和 updateName 突变到一个 Vue 组件：

import { mapState, mapMutations } from 'vuex';export default {// 映射模块状态为 propscomputed: mapState({name: state => state.user.name,}),// 映射模块突变为 propsmethods: mapMutations(['updateName',]),
};

数据流方式

除了使用 Vuex 模块，还有其他方法可以在 Vuex 中管理状态，包括：

• 直接状态：直接将状态放在 Vuex.Store 实例上，而不使用模块。
• Vuex 插件：使用第三方插件（例如 Vuex ORM）扩展 Vuex 的功能。
• 自有状态管理：使用自定义状态管理解决方案，而不依赖 Vuex。

结论

通过创建模块、定义状态并添加突变，可以初始化 Vuex 存储。Vuex 模块提供了对应用程序状态的组织，而映射辅助函数简化了在 Vue 组件中使用模块。

除了 Vuex 模块，还有多种数据流方式可用于满足不同应用程序的需求。

---

---

相关标签： 创建模块、 状态和突变、 vuex存储数据几种方式、 Vuex存储初始化、

上一篇：Redux商店初始化配置中间件和增强器REDUX商

下一篇：React状态初始化异步数据获取和备忘录选择