Vuex 模块中的 getters、mutations 和 actions：深入解析

2024-03-11 00:12:38

掌握 Vuex 模块中的 getters、mutations 和 actions

引言

Vuex 作为 Vue.js 官方状态管理库，在构建大型、复杂应用程序时不可或缺。然而，当涉及到与 Vuex 模块交互时，文档的清晰度可能会令人困惑。本指南将深入探讨如何访问模块中的 getters、mutations 和 actions，从而彻底解决这一问题。

获取 getters

语法：

store.getters["module-name/getter-name"]

说明：

获取 getter 的语法遵循以下格式：首先指定模块名称，后跟斜杠和 getter 名称。例如，要获取名为 "getProductById" 的 getter，可以写成：

store.getters["products/getProductById"]

触发 mutations

语法：

store.commit("module-name/mutation-name")

说明：

触发 mutation 的语法也类似于 getter。首先指定模块名称，后跟斜杠和 mutation 名称。例如，要触发名为 "clearWorkingData" 的 mutation，可以写成：

store.commit("products/clearWorkingData")

调用 actions

语法：

store.dispatch("module-name/action-name")

说明：

调用 action 的语法与获取 getter 和触发 mutation 类似。首先指定模块名称，后跟斜杠和 action 名称。例如，要调用名为 "fetchProducts" 的 action，可以写成：

store.dispatch("products/fetchProducts")

完整示例

模块示例：

// 模块 products
const moduleProducts = {
  getters: {
    getProductById: (state) => (id) => { /* ... */ },
  },
  mutations: {
    clearWorkingData: (state) => { /* ... */ },
  },
  actions: {
    fetchProducts: (context) => { /* ... */ },
  },
};

代码示例：

// 访问 getter
const product = store.getters["products/getProductById"](1);

// 触发 mutation
store.commit("products/clearWorkingData");

// 调用 action
store.dispatch("products/fetchProducts");