수동으로 마운트된 vue 구성 요소 내에서 vuex 사용

수동으로 마운트된 vue 구성 요소 내에서 vuex 사용

동적 요소에 컴포넌트를 수동으로 마운트하는 경우Vue.extend다음과 같습니다.

import Vue from 'vue';
import MyComponent from 'MyComponent.vue';

const MyComponentConstructor = Vue.extend(MyComponent);
const MyComponent = new MyComponentConstructor({
    propsData: {
        foo: 123,
    },
}).$mount('#mount-point');

이 방법으로 컴포넌트를 수동으로 마운트하면vuex안에서.MyComponent.vue.:

// (inside MyComponent.vue)
this.$store.commit('setSomething', true);

알겠네.

수집되지 않은 유형 오류: 정의되지 않은 속성 'commit'를 읽을 수 없습니다.

물론이야.vuex다른 정상적인 컴포넌트에서는 정상적으로 셋업되어 동작하고 있습니다.건설업자에게 전달하여 작동시킬 수 있는 것이 있나요?

옵션의 일부로 저장소를 생성자에게 전달합니다.

import store from "path/to/store"

const MyComponent = new MyComponentConstructor({
    store,
    propsData: {
        foo: 123,
    },
}).$mount('#mount-point');

파티에 좀 늦었지만, 그래도 이 일에 동참하고 싶은 충동을 느꼈어요.내가 찾은 최고의 접근법은 이 모든 것을 통과시키는 것이다.parent액세스 권한이 있는 경우, 실제 부모로서 키를 누릅니다.this(일반적으로 마운트 부모)다음 작업을 수행합니다.

const MyComponent = new MyComponentConstructor({
    parent: this,
    propsData: {
        foo: 123,
    },
}).$mount('#mount-point')

다른 유용한 세계대회에도 접속할 수 있습니다.$route,$router,그리고 물론.$store마운트된 컴포넌트인스턴스 내).이것은 또한 적절히 알려준다.Vue컴포넌트 계층 생성MyComponentdev-tools에 표시됩니다.

언급URL : https://stackoverflow.com/questions/44463984/using-vuex-inside-a-manually-mounted-vue-component