Vue - правильный способ сделать хранилище vuex доступным для программно созданного компонента - PullRequest
Новая
       7

Vue - правильный способ сделать хранилище vuex доступным для программно созданного компонента

0 голосов
/ 08 января 2019

У меня есть компонент .vue, Sectors, который я хочу добавить в контейнер с именем "desktop_sectors", когда на рабочем столе 

<v-flex sm12 md12 ma-2 ref="desktop_sectors">

или добавить в "мобильный", если на мобильном телефоне 

v-flex sm12 ma-2 ref="mobile">

Итак (насколько я знаю) мне нужно создать компонент Sectors программно, потому что я не хочу, чтобы он создавался два раза, как показано ниже 

<!-- desktop -->
<v-layout align-center justify-center row fill-height hidden-sm-and-down>
  </v-flex>  
   <v-flex sm12 md12 ma-2 ref="desktop">
  </v-flex>               
</v-layout>  

<!-- mobile -->
<v-layout align-center justify-center row fill-height hidden-md-and-up pa-t>
  <v-flex sm12 ma-2 ref="mobile">
    <Sectors/>
  </v-flex>                              
</v-layout>

так, я создаю это один раз, программно 

  var componentClass = Vue.extend(Sectors)
  var instance = new componentClass(123)
  instance.store(this.$store)
  instance.$mount()
  console.log(instance)
  this.$refs.mobile.appendChild(instance.$el)
  this.$refs.desktop.appendChild(instance.$el)

Прямо сейчас у меня просто есть метод внутри Секторов, называемый store, в который я отправляю экземпляр хранилища, но я надеялся, что есть лучший / правильный способ сделать хранилище доступным для Секторов, возможно, используя created() метод или mounted()

Дополнительная информация Я добавляю компонент программно, потому что на самом деле у меня есть несколько компонентов в дополнение к Sectors, которые все подписываются на некоторые мутации в магазине, и если я создаю одни и те же компоненты несколько раз, инициируемые вызовы API становятся двойными что нужно

1 Ответ

0 голосов
/ 08 января 2019

Мне нравится делать магазин доступным для всех моих компонентов, вот так: 

import storeConfig from './store'
Vue.prototype.$store = Vue.$store = storeConfig

Вы можете получить к нему доступ внутри своих компонентов следующим образом: 

export default {
  methods: {
    testStore(){
      console.log(this.$store)
    }
  }
}
...