使用TypeScript正确键入Vuex

目录

我们的示例Vuex store

苹果模块

动作和上下文

橘子模块

TypeScript是JavaScript的绝佳替代品，并且与Vue.js等前端框架配合得非常好。然而，一开始，很难获得正确的静态类型。遗憾的是，官方文档中没有写到如何做到这一点。幸运的是，通过一些实验，我设法做到了。

• 下载示例 - 232.1 KB

我们的示例Vuex store

在这个技巧中，我将创建一个Vuex store 来存储苹果和橙子。苹果和橘子将有自己独立的模块，根存储将聚合这两者。

苹果模块

让我们看看@/store/AppleModule.ts中Apple模块的第一个实现：

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

export interface ApplesState {
    items: Array
}

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

这个模块在它的状态中有一个属性，一个苹果数组，和一个设置这个数组的突变。状态的类型由ApplesState接口声明，作为mutation中的状态参数类型。

让我们将此模块包含在@/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({
  modules: {
    apples: appleModule
  }
})

我们用State接口声明根状态的类型。我们在Vuex.Store实例上使用State作为类型参数。

动作和上下文

要在store模块中定义操作，我们需要有一个Context类型。为此，我们需要将根状态类型导入我们的苹果模块，并使用它来定义Context类型。

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

type Context = ActionContext;

您现在可以将此Context类型用于操作定义中的上下文参数：

loadApples: async function(context: Context): Promise {
  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({
  modules: {
    apples: appleModule,
    oranges: orangeModule
  }
})

https://www.codeproject.com/Tips/5295301/Correctly-Typing-Vuex-with-TypeScript