在 Typescript Vue2 组件中输入 this.$store

Question

从 minimal Vue2+Vuex typescript app created with @vue/cli 开始。我想确保组件中对 this.$store.state 的引用是 Vuex 商店及其模块声明的正确类型。

我怎样才能做到这一点？在没有干预的情况下，所有对 this.$store 的引用都会解析为 Store<any>.

在this commit中我更改了@vue/cli创建的默认src/store/index.ts以在商店中引入message属性...

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

interface RootState {
  message: string;
}

const state: RootState = {
  message: "olleH",
};

export const store = new Vuex.Store({
  state,
  mutations: {},
  actions: {},
  modules: {},
});

在 this commit I updated shims-vue.d.ts to read as follows following guidance online 中添加对 Vue VM 的全局类型引用（我怀疑该方法仅适用于 Vue3，鉴于此文档的 URL 是 next.vue... )...

import type { HelloStore } from "./store";

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $store: HelloStore;
  }
}

尝试在 VSCode 内为 this.$store.state 获得自动完成支持仍然没有给我 message 属性.

我在任何地方都找不到有关如何为 Vue2 实现此目的的任何指导。

我应该使用什么模式才能 this.$store 使用 Vuex3 在我的 Vue2 组件中获得正确的输入。使用这些工具的最新稳定版本无法获得正确键入的值，这似乎很疯狂。我错过了什么？

https://github.com/cefn/vuex-store-typing 的重现是我的参考案例，供任何想尝试的人参考。

Answer 1

您在类型扩充中使用的模块名称是 Vue 3 only (the code is slightly different in Vue 2), but support for type augmentation of the $store instance property was only added in Vuex 4。这在 Vuex 3 中是不可能的。

但是，您实际上可以使用导出的 store 实例（已经 typed as HelloStore）而不是 this.$store，因为它们是同一个实例：

import store from '@/store' // store type is HelloStore

export default {
  mounted() {
    console.log(this.$store === store) // => true
  }
}

在 Typescript Vue2 组件中输入 this.$store

Typing this.$store within a Typescript Vue2 component

store

typescript

vue.js

vuex

vuejs2