从使用 @vue/cli创建的最小VUE2+VUEX打字应用应用程序启动。我想确保对此的参考。

Question

MimimalVue2+Vuex打字应用应用程序启动。我想确保组件中对

this.$store.state的引用是由VUEX商店及其模块声明的正确类型。

我怎么能实现这一目标？在没有干预的情况下，所有提及

this.$store都解决了。

在thiscommit

i更改了由

Store<any>

创建的默认值

src/store/index.ts

在商店中引入

@vue/cli

属性...

message this prosity i已更新以下读取如下所示。

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: {},
});

在vscode内获得自动完成支持的abterment for Vscode in for for for

shims-vue.d.ts

仍然没有给我一个property。

我找不到有关如何在任何地方为VUE2实现这一目标的任何指导。

我应该使用的模式是什么，以便使用VUEX3在我的VUE2组件中获取正确的键入。使用这些工具的最新稳定版本，您无法正确键入值，这似乎很疯狂。我错过了什么？

在

Https：//github.com/cefn/vuex-store-typing-是我想尝试实验的任何人的参考案例。
    

您在类型增强中使用的模块名称仅适用于vue 3仅（代码在VUE2

中略有不同），但是对

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

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

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

实例属性的类型增强的支持仅在VUEX4中添加。在Vuex 3中不可能

，但是，您实际上可以使用导出的

this.$store.state

实例（已经是

）而不是

message

，因为它们是同一实例：this.$store

VUEX3.x不允许键入

$store

元素，但是我找到了一种通过创建4个新成员的方法来减轻这种情况的方法：

store

-替换

Answer 1

this.$store-替换

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

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

$store

-替换

$typedState.*

$store.state.*

-替换$typedGetters[]

使用某些打字稿键入直接从商店定义中正确键入，用

$store.getters[]

Answer 2

取代vuex直接键入

而不是这样：

$typedCommit()

我正在使用以下方式：

• $store.commit()相同的模式

  c laste以外的所有vuex定义都应用（直接键入可以很好）

然后我用它来定义动态类型：
• https：//github.com/fluidd-core/fluidd/blob/develop/src/store/types.ts

  最终，这将添加新成员：

$typedDispatch()