Vue - 프로그래밍 방식으로 생성된 구성 요소가 vuex 저장소를 사용할 수 있도록 하는 올바른 방법

Vue - 프로그래밍 방식으로 생성된 구성 요소가 vuex 저장소를 사용할 수 있도록 하는 올바른 방법

.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 호출이 필요한 것의 두 배가 됩니다.

다음과 같이 모든 구성 요소가 스토어를 사용할 수 있도록 하고 싶습니다.

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

다음과 같이 구성 요소 내부에서 액세스할 수 있습니다.

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

Vue3의 경우 정의된 위치에서 저장소를 가져와 다음과 같이 사용할 수 있습니다.

    import <your component> from '<somewhere>';
    import { createApp } from 'vue';
    import { store } from '@/main.js';
    
    ...
    
    createApp(<your component>).use(store).mount("some selector");

언급URL : https://stackoverflow.com/questions/54090834/vue-correct-way-to-make-vuex-store-available-to-a-programmatically-created-com