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
};

然后在组件中的某个地方，或者我用以下代码调用特定模块动作/突变/存储的任何地方：

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

对我来说，将共享功能引入一个单一位置的最佳方式是什么？例如，如果我想set并同时正确地更改module1和module2中的存储，我该如何正确地使用它？我不确定的部分是，我如何准确地称之为通用突变，并使其针对所需模块的状态

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

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