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

【问题标题】：Vuex 4 + Vue 3 using shared state actions in modulesVuex 4 + Vue 3 在模块中使用共享状态动作
【发布时间】：2021-06-22 14:21:58
【问题描述】：

我有一个 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 和 @ 中的商店，我将如何正确使用它987654331@同时正确吗？我不确定的部分是我如何准确地调用通用突变并让它针对所需模块的状态

【问题讨论】：

你看过这个选项了吗stackoverflow.com/a/55144293/202913 ？
@Beyers 谢谢你，效果很好！随意将您的评论转换为问题，以便我可以给您赏金
我真的不能把这个解决方案归功于 :) 我建议您发布自己的答案并将赏金奖励给自己。赢得胜利。

标签： vue.js vuex vuejs3 vuex-modules vuex4

【解决方案1】：

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

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

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

【讨论】：