动态vue组件访问vuex

Question

我正在使用以下代码动态创建 vue 组件。我希望他们与 vuex 商店进行通信，但看起来他们无权访问它。有谁知道如何解决这个问题？

let module = this.modules.find(m => m.name === name)
const ModClass = Vue.extend(module.component);
const modInstance = new ModClass({
  propsData: {
    client: this.client,
  }
});
modInstance.$mount();
modInstance.$on('close', () => {
  modInstance.$destroy(true);
  (modInstance.$el).remove();
})
this.$refs.panels.appendChild(modInstance.$el);

Answer 1

From the docs:

为了在您的 Vue 组件中访问 this.$store 属性，您需要将创建的商店提供给 Vue 实例。

Vuex 有一种机制可以使用 store 选项将 store 从根组件“注入”到所有子组件中。

因此，在您的示例中，这将位于此处：

const modInstance = new ModClass({
  propsData: {
    client: this.client,
  },
  store: yourVuexInstanceHere
});

你在制作 Nuxt 插件吗？如果是这样，您可以通过从上下文中解构它来访问您的商店实例。

export default ({ app: { store } }, inject) => {

  // your code...

  const modInstance = new ModClass({
  propsData: {
    client: this.client,
    },
    store: store
  });

  // your code...

})

动态vue组件访问vuex

dynamic vue component access to vuex

vue.js

vuex