我正在使用 vuejs2 构建应用程序, vuex , 和 typescript在 visual-studio-code .我有 vetur安装了扩展。我已经构建了一个定义文件来为我的大部分项目提供智能感知,但我一直无法弄清楚如何添加我的 vuex存储到智能感知。我已经阅读了 Definition Documentation ,但我一直无法弄清楚我该如何做到这一点。我的目标是能够对 this.$store.
中的任何内容进行智能感知。目前,vetur为 state
、getters
等提供智能感知,但不为下一层提供智能感知(例如 this.$store.state.TestVariable
).如何为我的 vuex 获取智能感知商店?
契约(Contract)管理商店
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>
契约(Contract)行组件
<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>
最佳答案
您可以通过显式键入您的状态来实现此目的。
在 Contract Management Store.ts
export interface ContractManagementState {
Contract: ContractType;
}
在你的组件中:
...
(this.$store as Store<ContractManagementState>).<intellisense here>
不幸的是,每次以这种方式访问状态时都必须这样做。这是由于 Vuex 使用模块扩充的方式来向 typescript 声明 $store
属性的存在。
在 vuex/types/vue.d.ts
中:
declare module "vue/types/vue" {
interface Vue {
$store: Store<any>;
}
}
您不能用您的具体状态类型覆盖 any(毕竟这称为模块扩充)。一种可能的解决方案是使用 getter 来访问您的商店。存在多个用于将类型信息添加到 getter、mutator 和 action 的 typescript 库,例如 vuex-typescript和 vuex-typex .
关于typescript - VS Code 中 Vuex 商店的 Intellisense,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50644005/