问题描述
我有一个 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 并改变 {{1 中的存储，我将如何正确使用它}} 和 module1 同时正确？我不确定的部分是我如何准确地调用通用突变并使其针对所需模块的状态
解决方法
感谢@Beyers 链接的 this answer，我以与此类似的方式实现了该商店：
~ resource "google_compute_url_map" "urlmap-test-1" {
id = "projects/example/global/urlMaps/gclb-echoserver-1"
name = "gclb-echoserver-1"
# (6 unchanged attributes hidden)
- host_rule {
- hosts = [
- "echo.test.123",] -> null
- path_matcher = "echopath" -> null
}
+ host_rule {
+ hosts = [
+ "test.echo.com",]
+ path_matcher = "add-sample"
}
+ host_rule {
+ hosts = [
+ "echo.test.123",]
+ path_matcher = "echopath"
}
+ path_matcher {
+ default_service = "..."
+ name = "add-sample"
+ path_rule {
+ paths = [
+ "/",]
+ service = "..."
}
}
# (1 unchanged block hidden)
}
Plan: 0 to add,1 to change,0 to destroy.
然后在模块中，我只是实例化类并将方法传播到需要的地方
// 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()它并不像我个人喜欢的那样自动化和简化（定义一次，让模块神奇地通过标志或其他东西拥有所有可用的方法），但唉，生活也不完美。
>