如何在插件中使用 vuex 存储？

Question

在我的 Vue 插件中，我在 install 期间将 Vuex 存储作为选项的一部分传递

ma​​in.ts（主项目）：

import store from "./store/";

Vue.use(Camera, { store });

new Vue({
    router,
    store,
    render: h => h(AppName)
}).$mount("#app");

ma​​in.ts（在插件中）：

export default {
    install(Vue, options: any) {
        var result = options.store.getters['getFeaturesList']; // result is the correct object I need

        Vue.prototype.$myStore = function() {
            return options.store;
        }

        Vue.component("camera-control", Camera);
    }
}

但是，当我尝试访问插件内部组件中的原型属性时，它告诉我Property '$myStore' does not exist on type 'Camera'

Camera.vue（在插件中）

public getFeatureList() {
    const featuresList = this.$myStore().getters["getFeaturesList"]; //error
}

我假设安装函数和组件中的实例不一样，因此为什么它给我错误，但我需要能够从插件访问主项目的商店 - 这甚至可能吗？我如何才能进入商店？

Answer 1

“相机”类型上不存在属性“$myStore”

是 TypeScript 编译错误。这并不意味着$myStore 不能被访问，而是它没有正确输入；打字系统不知道 Vue 实例有 $myStore 属性。

正如the documentation 解释的那样，Vue 类型声明应该已经针对插件添加的新属性进行了扩展：

// plugin.d.ts
import Vue from 'vue';
import { Store } from 'vuex';

declare module 'vue/types/vue' {
  interface Vue {
    $store: Store<any>;
  }
}

plugin.d.ts 应该从输入路径自动导入或手动导入：

import "./plugin";