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

Question

我有一个 Vue 3 应用程序（没有 TypeScript），我正在使用 Vuex 4 商店。

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

举例来说，我有一个通用的 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
};

然后在组件中的某处或我调用特定模块的任何地方action/mutation/store我需要以下内容：

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

对我来说，将共享功能整合到一个单一位置的最佳方式是什么？如果我想 set 并改变 [中的商店，我将如何正确使用它？ =18=] 和 module2 同时正确吗？我不确定的部分是我如何准确地调用通用突变并让它以所需模块的状态为目标

Answer 1

感谢@Beyers 链接的，我以类似的方式实现了商店：

// store/sharedModuleMethods.js

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

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

// 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" })

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

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

Vuex 4 + Vue 3 using shared state actions in modules

vue.js

vuex

vuex-modules

vuejs3

vuex4