Vue 플러그인 내에 Vuex 스토어를 캡슐화할 수 있는 방법(설치 기능)이 있는가?

Vue 플러그인 내에 Vuex 스토어를 캡슐화할 수 있는 방법(설치 기능)이 있는가?

• 플러그인이 있고 이 플러그인은 Vuex를 사용한다.

// plugin.js
import Vuex from "vuex";
import store from "./store.js";

export default {
  install(Vue, options) {
    const storeInstance = new Vuex.Store(store);
    Vue.prototype.$store = storeInstance;
  }
};

• 그리고 그 플러그인에서 나는 상점 객체를 가져온다.

// store.js
export default {
  actions: {
    SOME_RANDOM_ACTION({ state, commit }) {
      console.log("some random action");
    }
  }
};

조치 파견 및 상태 사용은 괜찮으며 예상대로 작동한다.

그러나 이 플러그인을 vuex를 사용하는 다른 Vue 인스턴스에 추가하면 새 상태로 저장 개체가 다시 초기화하십시오.

// index.js
import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import plugin from "./plugin.js";

Vue.use(Vuex);
Vue.use(plugin);

new Vue({
  // WARN when i uncomment this next line of code Vuex gets re-initialized with new object
  // store: new Vuex.Store({ state: { hello: "hix" } }),
  components: {
    App
  }
}).$mount("#app");

저장소 초기화를 해제하면 이제 플러그인에 정의된 저장소를 사용할 수 없음.

현재 다음과 같은 해결 방법을 염두에 두고 있다.

1. 내 플러그인 저장소 개체를 index.js 기본 앱으로 내보내고 이 저장소를 모듈로 사용하십시오.
2. 다른 상태 관리를 사용하십시오.

내 플러그인 안에 Vuex를 사용할 방법이 있을까?

https://codesandbox.io/s/vibrant-sanne-67yej?file=/src/main.js:0-371

Vuex 플러그인 사용store저장소 인스턴스 할당 옵션Vue.prototype.$store, 사용자 자신의 플러그인과 유사하게.

여러 점포를 사용하려는 의도가 있다면, 그들의 이름이 충돌해서는 안 된다.핵심은 플러그인 내부의 스토어 객체에 다른 이름을 지정하는 것이다.$store

Vue.prototype.$myPluginStore = storeInstance;

하지만 이것은 여전히 캡슐화되지 않는다.$myPluginStore플러그인은 앱 내에서 액세스할 수 있으므로 플러그 인 내부에서 액세스할 수 있다.

// App.vue

computed: {
    appState() {
      return this.$store.state;
    },
    pluginState() {
      return this.$myPluginStore.state; // this is now accessible within the main app
    }
}

신규 매장을 만드는 대신 기존 매장의 모듈로 점포를 사용할 수 있도록 하는 것이 합리적 해결책이겠지만, 한 앱 내에서만 사용할 수 있고, 패키지의 플러그인으로 사용할 때는 그렇지 않다.

주요 문제는 기본 저장소 인스턴스(instance)이다.$store)는 Vuex 도우미를 사용할 수 있음 -mapGetters등

플러그인에 의해 노출된 설치 방법을 활용하여 저장소에 액세스할 수 있으며, 저장소는 다른 구성 요소에서 액세스할 수 있어야 한다.

한가지 가능한 해결책은 당신의 상점을 에 등록하는 것이다.index.js다음과 같다:

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import plugin from "./plugin";

Vue.use(plugin);

new Vue({
  store,
  components: {
    App
  }
}).$mount("#app");

그런 다음 노출할 수 있다.$doStuff()에 접근하십시오.$store에서plugin.js

export default {
  install(Vue) {
    Vue.prototype.$doStuff = function (payload) {
      this.$store.dispatch("SOME_RANDOM_ACTION", payload);
    };
  }
};

저장소 인스턴스는 플러그인 또는 다른 모든 구성 요소에서 액세스할 수 있다.

여기서 작업 샘플을 볼 수 있다.

참조URL: https://stackoverflow.com/questions/70885696/is-there-a-way-to-encapsulate-vuex-store-inside-vue-plugin-its-install-function