Question

我正在使用import json手动将组件安装到动态元素，如下所示：

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

我明白了：

未捕获的TypeError：无法读取未定义的属性'commit'

当然// (inside MyComponent.vue) this.$store.commit('setSomething', true);已设置好并在其他正常组件中正常工作。有什么东西我可以传递给构造函数来使它工作吗？

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在开发工具中可见。

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

2 个答案: