Vuex 4 + Vue 3 在模块中使用共享 state 动作

Question

I have a Vue 3 app (without TypeScript), and I'm using a Vuex 4 store.

I have my store separated into modules that represent some common themes, for example I have a user module that contains the store, getters, actions etc that are appropriate for dealing with a user. But, I also have some common functionalities that is present in all of my modules, and it's an obvious place where I could simplify my modules and thin them out a bit.

Let's say for example that I have a generic set() mutator, like below:

const mutations = {
  set(state, payload) {
    state[payload.key] = payload.data;
  }
}

This will simply take in a payload and populate whatever store object the payload 'key' field belongs to, and it works well when I want to simply set a single field in my store. Now, the issue is that this set() function is being duplicated in every single store module that I have since it's just a generic store mutation, and once the number of modules I reach increases a bit, you can imagine that it's quite wasteful and pointless to include this mutation every single time.

I'm not sure how to implement this, however.

My current main store file looks like this (simplified for the sake of the question):

// store/index.js

import { createStore } from "vuex";

import module1 from "./modules/module1";
import module2 from "./modules/module2";

export const store = createStore({
    modules: { module1, module2 },
});

All of my modules are implemented in the same exact way:

// store/modules/module1.js

const state = { };
const mutations = { set(state, payload) };
const actions = { };
const getters = { };

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

And then somewhere in a component or wherever I'd call the specific module action/mutation/store I need with the below:

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

What would be the best way for me to bring that shared functionality out into a singular place, and how would I properly use it if I, for example, wanted to set and mutate the store in module1 and module2 at the same time properly? The part that I'm not sure about is how exactly I could call a generic mutation and have it target the desired module's state

Answer 1

Thanks to this answer linked by @Beyers, I've implemented the store in a similar fashion to this:

// store/sharedModuleMethods.js

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

And then in the modules, I just instantiate the class and spread the methods where they need to be

// store/modules/module1.js

import SharedModuleMethods from "../sharedModuleMethods";
const methods = new SharedModuleMethods()

const mutations = {
  ...methods.mutations,
  // Module specific mutations go here
};

And then in whatever component I need to set() something, I can just call the mutation like I would before

...mapMutations: ({ setModule1: "module1/set", setModule2: "module2/set" })

It's not quite as automated and streamlined as I'd personally prefer (define it once, have the modules magically have all the methods available to them via a flag or something), but alas life isn't perfect either.