VS Code 中 Vuex Store 的智能感知

Question

我建立使用应用程序vuejs2，vuex和打字稿在视觉工作室码。我安装了vetur扩展。我已经构建了一个定义文件来为我的大部分项目提供智能感知，但我一直无法弄清楚如何将我的vuex存储添加到智能感知。我已经通读了定义文档，但我一直无法弄清楚我如何做到这一点。我的目标是能够在this.$store.. 目前，vetur为、 等提供智能感知state，getters但它不为下一个级别提供智能感知（例如this.$store.state.TestVariable）。如何为我的vuex商店获取智能感知？

合同管理商店

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        Contract: new Library.Model.Entity.Contract()
    }
});

合约组件

<template>
    <contract-line></contract-line>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Vuex from 'vuex';
    import store from '../store/ContractManagementStore';
    import ContractLine from "./ContractLine.vue";

    export default Vue.extend({
        name: 'contract-management',
        store,
        components: {
            'contract-line': ContractLine
        }
    });
</script>

<style>

</style>

合同行组件

<template>
    <button v-if="CanDelete"></button>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Vuex from 'vuex';

    Vue.use(Vuex);

    export default Vue.extend({
        computed:{
            CanDelete(): Boolean {
                // Looking for intellisense after this.$store.state.
                return this.$store.state.Contract.ContractStatus.Value === Library.Enums.ContractStatus.Draft
            }
        }
    });
</script>

<style>

</style>

Answer 1

您可以通过明确输入您的状态来实现此目的。

在Contract Management Store.ts

export interface ContractManagementState {
    Contract: ContractType;
}

在您的组件中：

...
(this.$store as Store<ContractManagementState>).<intellisense here>

不幸的是，每次以这种方式访问​​状态时都必须执行此操作。这是由于 Vuex 使用模块扩充的方式来声明$store打字稿声明属性的存在。

在vuex/types/vue.d.ts：

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

您不能用具体的状态类型覆盖 any （毕竟这称为模块增强）。一个可能的解决方案是使用 getter 来访问您的 Store。有几个 typescript 库可用于向 getters、mutators 和 actions 添加类型信息，例如vuex-typescript和vuex-typex。