javascript - 有没有办法将 Vuex 商店封装在 Vue 插件中(它的安装功能)？

Question

我有一个插件，这个插件使用 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 对象。

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

调度 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");

当您取消注释存储初始化时，插件中定义的存储现在不可用。
目前，我想到了这些解决方案:

将我的插件存储对象导出到 index.js 主应用程序，并将此存储用作模块。

使用其他一些状态管理。

有没有办法在我的插件中使用 Vuex？
https://codesandbox.io/s/vibrant-sanne-67yej?file=/src/main.js:0-371

Answer 1

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
    }
}

允许将商店用作现有商店的模块而不是创建新商店将是一个合理的解决方案，但仅限于在一个应用程序中使用而不是用作包的插件时。
主要问题是默认存储实例( $store )可以使用 Vuex 助手 - mapGetters ， ETC。