vue.js - Vuex 4 + Vue 3 在模块中使用共享状态操作

Question

我有一个 Vue 3 应用程序(没有 TypeScript)，并且我使用的是 Vuex 4 商店。
我将商店分成代表一些常见主题的模块，例如我有一个 user包含适合与用户打交道的商店、 setter/getter 、 Action 等的模块。但是，我的所有模块中也有一些共同的功能，这是一个明显的地方，我可以简化我的模块并将它们精简一点。
例如，假设我有一个通用的 set()突变器，如下所示:

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同时正确？我不确定的部分是我如何准确地调用通用突变并让它针对所需模块的状态

Answer 1

感谢 this answer由@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" })

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