IT이야기

2개의 vuex 스토어를 하나의 스토어로 결합하는 방법

cyworld 2022. 7. 24. 22:33
반응형

2개의 vuex 스토어를 하나의 스토어로 결합하는 방법

안녕하세요 저는 2개를 조합해야 합니다.vuex단일 스토어에 저장(두 스토어는 서로 다른 프로젝트)

import storeA from '/path';

import storeB from '/path';

이제 두 가게를 합쳤다

const combinedStore = //combine logic as i don't know this logic

2개의 vuex 스토어를 결합하기 위해 stackoverflow에서 많이 검색했지만 그렇게 게시된 해결책을 찾을 수 없었습니다.

여기 나의 방법이 있다.vuex매장은 양쪽에서와 같이 보일 것이다.stores

스토어 1:

   // storeA.js
    
    const store = {
        state(){return {}},
        actions: {async getData(){...}},
        mutations: {},
        getters: {}, 
        modules:{ 
           Login
        }
    }

스토어 2:

   // storeB.js
    
    const store = {
        state(){return {}},
        actions: {async getUsers(){...}},
        mutations: {},
        getters: {}, 
        modules:{ 
           workflow
        }
    }

제가 시도한 방법은 다음과 같습니다.

import StoreA from 'storeA.js';
import StoreB from 'storeB.js';

const newStoreData = Object.assign({},StoreA,StoreB)

const newStore = new Vuex.Store({
    ...newStoreData
});

이제 하나의 스토어만 작동하며 다른 스토어는 다음과 같은 오류를 발생시킵니다.

정의되지 않은 이름(i, e)의 first_name 이름을 읽습니다.state.[module].first_name)

여기서 문제를 재현할 수 있습니다. https://codesandbox.io/s/vuex-playground-forked-1h344?file=/src/main.displays

원래 작업용 포크: https://codesandbox.io/s/k012qvkmnv?file=/src/main.displays

Vue 3 이상

애인 버전도 아마 이 방법이 있을 텐데 잘 모르겠어요.

import StoreA from 'storeA.js';
import StoreB from 'storeB.js';

const newStore = new Vuex.Store(storeA);

newStore.registerModule('', storeB)

방금 수정했습니다store2.js그리고.main.js파일

해결된 문제에 대한 링크: https://codesandbox.io/s/vuex-playground-forked-6pg4w?file=/src/main.http:/https://codesandbox.io/s/vuex-playground-forked-6pg4w?file

다음은 이에 대한 문서입니다.https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration

언급URL : https://stackoverflow.com/questions/70114291/how-to-combine-2-vuex-stores-into-a-single-store

반응형