【Vuex 模块module】

什么是Vuex模块？

Vuex模块是将整个状态树（state tree）拆分为更小、更可管理的模块的方法。它允许你将应用程序状态分成可维护的块，每个块都有自己的状态、mutations、actions和getters。

为什么要使用Vuex模块？

1. 代码组织： 当应用程序变得复杂时，单一的状态树可能变得难以管理。使用模块，可以将相关的状态、操作和计算属性分组到一起，使代码更具可读性。

2. 命名空间： 模块允许创建命名空间，以避免命名冲突，因为在大型应用中很可能会有多个开发人员同时工作。

3. 可重用性： 更轻松地复用模块。如果应用程序中有相似的功能，可以将模块复制到其他部分而无需大幅度更改代码。

如何创建一个Vuex模块？

// 创建一个名为products.js的模块

const state = {
  products: [],
};

const mutations = {
  addProduct(state, product) {
    state.products.push(product);
  },
};

const actions = {
  addProduct({ commit }, product) {
    commit('addProduct', product);
  },
};

const getters = {
  getProductCount: (state) => state.products.length,
};

export default {
  state,
  mutations,
  actions,
  getters,
};

在这个示例中，创建了一个名为products.js的模块，包含状态、mutations、actions和getters。

如何在应用程序中使用模块？

在store.js中导入模块并注册它们。

import Vue from 'vue';
import Vuex from 'vuex';
import productsModule from './modules/products';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    products: productsModule,
  },
});

export default store;

在组件中通过this.$store.state.products来访问products模块的状态，通过this.$store.commit('products/addProduct', product)来触发mutations，通过this.$store.dispatch('products/addProduct', product)来触发actions，通过this.$store.getters['products/getProductCount']来获取getters的值。