4

我有一个 Vue 3 应用程序（没有 TypeScript），并且我使用的是 Vuex 4 商店。

我将商店分成代表一些常见主题的模块，例如，我有一个user模块，其中包含适合与用户打交道的商店、getter、动作等。但是，我的所有模块中也有一些共同的功能，这是一个明显的地方，我可以简化我的模块并将它们精简一点。

例如，假设我有一个通用的set()mutator，如下所示：

const mutations = {
  set(state, payload) {
    state[payload.key] = payload.data;
  }
}

这将简单地接收一个有效负载并填充有效负载'key'字段所属的任何存储对象，当我想在我的商店中简单地设置一个字段时它工作得很好。现在，问题是这个set()函数在我拥有的每个存储模块中都重复，因为它只是一个通用的存储突变，一旦我达到的模块数量增加了一点，你可以想象包含它是非常浪费和毫无意义的每次都有这种突变。

但是，我不确定如何实现这一点。

我当前的主存储文件如下所示（为了问题而简化）：

// store/index.js

import { createStore } from "vuex";

import module1 from "./modules/module1";
import module2 from "./modules/module2";

export const store = createStore({
    modules: { module1, module2 },
});

我所有的模块都以相同的方式实现：

// store/modules/module1.js

const state = { };
const mutations = { set(state, payload) };
const actions = { };
const getters = { };

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

然后在组件中的某个地方或任何我需要的特定模块操作/突变/存储的地方调用以下内容：

...mapMutations: ({ set: "module1/set" })

对我来说，将共享功能带到一个单一的地方的最佳方式是什么？例如，如果我想同时正确地set改变商店，module1我将如何正确使用它？module2我不确定的部分是我如何准确地调用通用突变并让它针对所需模块的状态

4

1 回答 1

1

感谢@Beyers 链接的这个答案，我以与此类似的方式实现了商店：

// store/sharedModuleMethods.js

export default class {
  constructor() {
    this.mutations = {
      set(state, payload) {}
    }
  }
}

然后在模块中，我只是实例化类并将方法传播到需要的地方

// store/modules/module1.js

import SharedModuleMethods from "../sharedModuleMethods";
const methods = new SharedModuleMethods()

const mutations = {
  ...methods.mutations,
  // Module specific mutations go here
};

然后在我需要的任何组件中set()，我可以像以前一样调用突变

...mapMutations: ({ setModule1: "module1/set", setModule2: "module2/set" })

它不像我个人喜欢的那样自动化和简化（定义一次，让模块神奇地通过标志或其他东西神奇地拥有所有可用的方法），但是生活也不是完美的。

于 2021-04-04T14:49:58.330 回答