Intellisense для магазина Vuex в VS Code - PullRequest
Новая
       99

Intellisense для магазина Vuex в VS Code

0 голосов
/ 01 июня 2018

Я создаю приложение, используя , и в .У меня установлено расширение .Я создал файл определения, чтобы дать мне intellisense для большей части моего проекта, но я не смог выяснить, как добавить мое хранилище в intellisense.Я прочитал Документацию по определению , но мне не удалось вместе понять, как я могу это сделать.Моя цель - научиться понимать интеллигентность всего в this.$store..В настоящее время предоставляет значение intellisense для state, getters и т. Д., Но не обеспечивает значение intellisense для следующего уровня (например, this.$store.state.TestVariable).Как я могу получить intellisense для моего магазина?

Магазин управления контрактами 

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>

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Я также сталкиваюсь с этой проблемой в эти два дня и не могу вынести отсутствие осведомленности о печатании this.$store.state.

@ georg-grab 's решение дает мне это вдохновение.

  1. Я не знаком с TypeScript ... Так что это решение может быть глупым, но оно работает.
  2. Мое решение может иметь дело только с this.$store.state,все остальные, такие как this.$sotre.dispatch, по-прежнему не имеют IntelliSense 
// store/index.ts
// I will not explain vuex modules here. Please see the doc of Vuex by yourself.
import Vue from 'vue'
import Vuex, {Store} from 'vuex'

import auth, {State as AuthState} from './modules/auth'  // State is an interface defined in module.

export interface State {
  auth: AuthState
}

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
}) as Store<State>  // Force TypeScript compiler to recognize this as Store<State> instead of Store<any>.

Затем добавьте глобальный метод получения экземпляра через плагин Vue: 

// main.ts
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store, { State } from './store'

declare module 'vue/types/vue' {  // Tell TypeScript the type of this.$state is our defined 'State'
  interface Vue {
    $state: State
  }
}
const TypedState = {  // define a Vue plugin. See https://vuejs.org/v2/guide/plugins.html
  install(Vue: any) {  // For simplify, didn't pass 'State' via options
    Object.defineProperty(Vue.prototype, '$state', {  // Add a global getter 'this.$state' in vm
      get (): State { return store.state as State }  // Force TypeScript compiler to recognize this as our defined 'State'
    })
  }
}
Vue.use(TypedState)

Теперь вы можете получить доступзначения в this.$store.state через this.$state, с IntelliSense.

Я также хочу "перезаписать" интерфейс vm.$store (от Store<any> до Store<State>), но TypeScript кажетсяне имеет возможности сделать такую ​​вещь: 

declare module 'vue/types/vue' {
  interface Vue {
    $store: Store<State>   // Error
  }
}
0 голосов
/ 01 июня 2018

Вы можете достичь этого, явно введя свое состояние.

В Contract Management Store.ts

export interface ContractManagementState {
    Contract: ContractType;
}

В вашем компоненте: 

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

Вы должны сделать эток сожалению, каждый раз, когда вы получаете доступ к этому состоянию.Это связано с тем, что Vuex использует расширение модуля для объявления о существовании свойства $store для машинописного текста.

In vuex/types/vue.d.ts: 

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

Вы не можете переопределить любоес вашими конкретными наборами состояний (в конце концов, это называется модуль увеличение ).Возможное решение - использовать геттеры для доступа к вашему магазину.Существует несколько библиотек машинописи для добавления информации о типе в методы получения, мутаторы и действия, такие как vuex-typcript и vuex-typex .

...