在手动安装的vue组件中使用vuex

Question

我正在使用以下方法将组件手动安装到动态元素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);

我得到这个：

未捕获的TypeError：无法读取未定义的属性“提交”

当然vuex可以在其他正常组件中进行设置并正常工作。我可以传递给构造函数使其正常工作吗？

Answer 1

将存储作为选项的一部分传递给构造函数。

import store from "path/to/store"

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

Answer 2

我参加聚会有点晚了，但仍然有想插话的冲动。我发现的最好方法是将密钥parent作为实际父级（如果您有权访问它）（它将位于this安装父级上）通常）。所以你会这样做：

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

您将可以访问已安装组件实例中的其他有用的全局变量（例如$route、$router，当然还有）。$store这也正确地告知了Vue组件层次结构，使其MyComponent在开发工具中可见。