多个vuex存储在vue中

mwkjh3gx 于 2022-12-23 发布在 Vue.js

关注(0)|答案(1)|浏览(177)

我正在尝试在我的应用程序中实现一个微前端架构。我有一个公共存储，其中包含所有服务中常用的所有数据。在其中一个服务中，我尝试导入公共存储并在全局范围内使用它，但无法访问它。
示例：
在main.js中，我正在尝试下面的代码：

import Vue from "vue";
// Trying to import the common store
import commonStore from "../../common/src/store"
import router from "./router";
import store from "./store/store";

new Vue({
      router,
      store,
      commonStore
});

在App. vue我试图下面，但我无法访问它.

mounted(){
  console.log(this.$commonStore);
}

有没有办法，我可以使用多个商店在vue。

vue.js

来源：https://stackoverflow.com/questions/67702500/multiple-vuex-store-in-vue

1条答案

按热度按时间

0pizxfdo1#

您正在寻找Modules。在Vuex中，您可以定义独立的存储模块：

const commonStore = {
  state: () => ({ a: 1 }),

};

const globalStore = {
  state: () => ({ a: 2 }),
};

const store = new Vuex.Store({
  modules: {
    commonStore: commonStore,
    globalStore: globalStore
  }
})

new Vue({
  router,
  store,
});

然后，您可以通过以下方式访问模块存储：

mounted() {
  console.log(this.$store.state.commonStore.a); // => 1
  console.log(this.$store.state.globalStore.a); // => 2
}

赞(0）回复(0）举报 2022-12-23

我来回答

多个vuex存储在vue中

1条答案

相关问题

热门标签

最新问答