Блог

Я использую следующий код для динамического создания компонентов 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);
 

Из документов:

Чтобы иметь доступ к этому свойству.$store в ваших компонентах Vue, вам необходимо предоставить созданное хранилище экземпляру Vue.

В Vuex есть механизм для «внедрения» хранилища во все дочерние компоненты из корневого компонента с опцией хранилища.

Итак, в вашем примере это будет здесь:

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

})