Vuex 进阶——模块化创建多个 Vuex 实例

2023-10-07 21:56:03

Vuex 模块化概述

Vuex 的模块化功能允许您将 store 划分为多个独立的模块，每个模块都有自己的状态、 getters、 mutations 和 actions。这使得您可以更轻松地管理大型应用程序中的状态，并避免在单一 store 中存储过多数据。

创建 Vuex 模块

要创建 Vuex 模块，您需要在 Vuex store 中定义一个名为 modules 的对象。该对象的值应为一个对象，其中每个属性代表一个模块。模块的名称应与模块中的状态、 getters、 mutations 和 actions 的命名空间相匹配。

例如，要创建一个名为 user 的模块，您可以在 Vuex store 中定义以下代码：

const store = new Vuex.Store({
  modules: {
    user: {
      state: {
        name: '',
        email: ''
      },
      getters: {
        // ...
      },
      mutations: {
        // ...
      },
      actions: {
        // ...
      }
    }
  }
});

使用 Vuex 模块

要使用 Vuex 模块，您可以在组件中使用 mapState(), mapGetters(), mapMutations() 和 mapActions() 辅助函数。这些辅助函数允许您将模块的状态、 getters、 mutations 和 actions 映射到组件的计算属性、方法和模板中。

例如，要在组件中使用 user 模块的状态和 getters，您可以使用以下代码：

import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState('user', ['name', 'email']),
    ...mapGetters('user', ['fullName'])
  }
};