I am currently developing an application using Vue.js 2, Vuex, and TypeScript within Visual Studio Code. I have the Vetur extension installed to enhance my development experience. While I have managed to set up intellisense for most of my project with a definition file, I am struggling to add my Vuex store to the intellisense setup. Despite reading through the Definition Documentation, I still can't seem to figure out how to achieve intellisense for items under `this.$store`. Although Vetur provides intellisense for things like `state` and `getters`, it doesn't extend to the next level (e.g., `this.$store.state.TestVariable`). So, my main question is, how can I enable intellisense for my Vuex store?
Contract Management Store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
Contract: new Library.Model.Entity.Contract()
}
});
Contract Component
<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 Line Component
<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>