여러 Vue 인스턴스에 여러 Vue 모듈 인스턴스 필요

여러 Vue 인스턴스에 여러 Vue 모듈 인스턴스 필요

폼을 위한 사이트에 Vue를 통합하려고 합니다.즉, 페이지에 여러 개의 폼이 있는 경우 해당 Vue 애플리케이션의 인스턴스를 여러 개 생성해야 합니다.모든 인스턴스가 동일한 Vuex 저장소를 공유합니다.

각 Vue 인스턴스가 자체 로컬 상태를 가질 수 있도록 Vuex 모듈을 만들었습니다.주요 목표는 한 Vue 인스턴스가 다른 Vue 인스턴스의 상태를 업데이트하지 않도록 하는 것입니다.

여기 Vuex 모듈이 있습니다.

export default {
  state() {
    return {
      stateObj: {...}
    }
  }
}

Vuex 인스턴스 만들기:

export default new Vuex.Store({
  modules: {
    form
  }
})

Vuex 문서를 읽었는데 모듈 상태를 반환하는 함수를 사용해야 한다고 나와 있습니다.단, 하나의 Vue 인스턴스에서 모듈 상태를 업데이트하면 다른 모든 Vue 인스턴스의 모듈 상태가 업데이트됩니다.

Vuex 문서의 섹션은 다음과 같습니다.

이 문제가 발생하는 이유는 실제로 여러 개의 인스턴스를 생성하지 않기 때문입니다.form모듈 또는 매장.기본적으로 여러 개의 Vue 애플리케이션 인스턴스를 만듭니다. 즉, 여러 개의 루트 Vue 인스턴스가 있습니다.

그러나 스토어 코드를 보면 다음과 같은 인스턴스를 내보냄으로써 Vuex 스토어의 단일 인스턴스를 만들고 있음을 알 수 있습니다.export default new Vuex.Store({ /**/ }).

여러 루트 인스턴스(예: 여러 Vue 애플리케이션)가 있는 경우 Vuex Store 인스턴스가 여러 개 필요합니다.코드는 다음과 같습니다.

// store.js - Note: Do not return singleton store
export default function makeStore() {
  return new Vuex.Store({
    modules: { form }
  });
}

// main.js/root.js
import makeStore from './store.js';

// Creating multiple instances of root instance and Vuex store.
const app1 = new Vue({ store: makeStore() });
const app2 = new Vue({ store: makeStore() });

이것으로 당신의 문제가 해결될 것입니다.이러한 설계는 드물지 않지만, 한 걸음 물러서서 이러한 모든 앱에서 데이터를 공유해야 한다면 어떻게 해야 할까요?인스턴스가 여러 개 있기 때문에 쉽게 할 수 없습니다.이 모든 양식이 따로따로 작동하기만 하면 됩니다.

또는 실제로 스토어의 단일 인스턴스를 만들어야 하는 경우에는 스토어 설계를 변경하는 것이 좋습니다.루트 인스턴스/애플리케이션을 1개요v-for여러 폼을 생성합니다.마찬가지로 스토어 측에는 모든 양식의 컬렉션을 유지하기 위한 배열이 있습니다.

언급URL : https://stackoverflow.com/questions/55272189/need-multiple-instances-of-vuex-module-for-multiple-vue-instances