使用 TypeScript 正确地类型化 Vuex

• 下载示例 - 232.1 KB

我们的示例 Vuex Store

在本教程中，我将创建一个 Vuex store 来存储苹果和橙子。苹果和橙子将拥有各自独立的模块，根 store 将聚合这两个模块。

苹果模块

让我们看一下 Apple 模块的第一个实现，位于 @/store/AppleModule.ts

import { Apple } from "@/models/Apple";

export interface ApplesState {
    items: Array<Apple>
}

export default {
    namespaced: true,
    state: (): ApplesState => ({
      items: Array<Apple>()
    }),
    mutations: {
        setApples: function(state: ApplesState, apples: Array<Apple>): void {
          state.items = apples;
        }
    }
}

这个模块在其 state 中有一个属性，一个苹果数组，以及一个 mutation，用于设置这个数组。state 的类型由 ApplesState 接口声明，该接口用作 mutation 中 state 参数的类型。

让我们在 @/store/intex.ts 中包含这个模块

import Vue from 'vue'
import Vuex from 'vuex'
import appleModule, { ApplesState } from './AppleModule'

Vue.use(Vuex)
export interface State {
  apples: ApplesState;
}

export default new Vuex.Store<State>({
  modules: {
    apples: appleModule
  }
})

Actions 和 Context

为了在 store 模块中定义 actions，我们需要一个 Context 类型。为此，我们需要将根 state 类型导入到我们的苹果模块中，并使用它来定义 Context 类型。

import { ActionContext } from "vuex";
import { State } from '.';

type Context = ActionContext<ApplesState, State>;

现在，您可以在 action 定义中使用这个 Context 类型

loadApples: async function(context: Context): Promise<Array<Apple>> {
  const apples = (await axios.get('apples')).data;
  context.commit('setApples', apples);
  return context.state.items;
}

橙子模块

橙子模块的实现方式与苹果类似。毕竟它们不像苹果和橙子一样...

import Vue from 'vue'
import Vuex from 'vuex'
import appleModule, { ApplesState } from './AppleModule'
import orangeModule, { OrangesState } from './OrangeModule'

Vue.use(Vuex)

export interface State {
  apples: ApplesState;
  oranges: OrangesState;
}

export default new Vuex.Store<State>({
  modules: {
    apples: appleModule,
    oranges: orangeModule
  }
})

历史

• 2021 年 5 月 4 日：第一个版本