모듈의 공유 상태 액션을 사용한 Vuex 4 + Vue 3

모듈의 공유 상태 액션을 사용한 Vuex 4 + Vue 3

Vue 3 앱(TypeScript 없음)을 가지고 있으며 Vuex 4 스토어를 사용하고 있습니다.

스토어를 몇 가지 일반적인 테마를 나타내는 모듈로 나누었습니다.예를 들어 다음과 같습니다.user사용자 처리에 적합한 스토어, 게터, 액션 등을 포함하는 모듈.하지만 모든 모듈에 공통 기능이 몇 가지 있습니다.모듈을 심플하게 하고 솎아낼 수 있습니다.

예를 들어, 내가 일반적인 것을 가지고 있다고 가정해 봅시다.set()뮤테이터는 다음과 같습니다.

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

이렇게 하면 payload를 가져와 payload '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동시에 제대로 할 수 있을까요?제가 잘 모르는 부분은 어떻게 하면 범용 돌연변이를 호출하여 원하는 모듈의 상태를 타겟으로 할 수 있는가 하는 것입니다.

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

내가 개인적으로 원하는 것만큼 자동화되거나 합리화되지는 않았지만(한 번 정의하면 모듈이 깃발 같은 것을 통해 사용할 수 있는 모든 방법을 마술처럼 가지고 있다), 애석한 삶도 완벽하지는 않다.

언급URL : https://stackoverflow.com/questions/66805355/vuex-4-vue-3-using-shared-state-actions-in-modules