dynamic vue component access to vuex

user_2424495 0
Viewed 64

I'm using the following code to dynamically create vue components. I'd like them to communicate with the vuex store but it looks like they have no access to it. Does anyone know how to solve this?

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);
vuex vue.js
1 Answers

From the docs:

In order to have an access to this.$store property in your Vue components, you need to provide the created store to Vue instance.

Vuex has a mechanism to "inject" the store into all child components from the root component with the store option.

So, in your example this will be here:

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

Are you making a Nuxt plugin? If so, you can reach your store instance by deconstructing it from the context.

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

  // your code...

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

  // your code...

})
user_14424760
Related