Question

在手动挂载的 vue 组件中使用 vuex

2017-06-09

3113

vue.js vue-component 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');

当我以这种方式手动安装组件时，我无法在 MyComponent.vue 中使用 vuex 。：

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

我得到这个：

Uncaught TypeError: Cannot read property 'commit' of undefined

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