如何使用 typescript 访问其他 Vuex 模块？

Question

我正在尝试使用 typescript 编写一个 Vuex 存储（不使用 vuex-module-decorators，只是简单的 Vuex + typescript 以保持简单）。我的根存储没有状态，只有模块：

export interface RootState { }
export const store: StoreOptions<RootState> = {
  strict: (process.env.NODE_ENV !== 'production'),
  state: {},
  mutations: {},
  modules: {
    moduleA,
    moduleB
  }
}

moduleA 有一些状态：

export interface ModAState { 
 aValue: string
}
const modAState: ModAState = {
 aValue: 'value A'
}
export default const moduleA = {
  namespaced: true,
  state: modAState,
  getters: {},
  mutations: {},
  actions: {}
}

和模块 B 一样：

export interface ModBState { 
 bValue: string
}
const modBState: ModBState = {
 bValue: 'value B'
}
const modBActions: ActionTree<ModBState, RootState> = {
  act1({state, rootState, commit, dispatch}) {
    let foo = rootState.moduleA.aValue // <<<<< Typescript error: property moduleA does not exist on '{}' 
  }
}
export default const moduleB = {
  namespaced: true,
  state: modBState,
  getters: {},
  mutations: {},
  actions: modBActions
}

上面的错误在 modB 的 act1 中——rootState 只是 {}，就打字稿而言，它无法访问根存储的 modules .那么如何在模块 B 的动作中获取模块 A 的状态？

这是一个codesandbox：https://codesandbox.io/embed/vuex-typescript-modules-x7f7s（商店在App.vue那里）

Answer 1

打字你的 rootState 是一个空对象

// define the interface

/**
 * 
 */
export interface RootState {
  ModAState: ModAState;
  ModBState : ModBState ;
}

关于行动（无改动）

const modBActions: ActionTree<ModBState, RootState> = {
// ...

关于动作（功能）

const modBActions = {
  act1({state, rootState, commit, dispatch}: ActionContext<ModBState, RootState>): Promise<any> {
    let foo = rootState.moduleA.aValue 
  },
}

// ...

如果你的rootState发生了很多变化，你可以暂时跳过这个（不推荐）

const modBActions: ActionTree<ModBState, any> = {
// ...

Answer 2

对于 Vuex 的类型安全，您可以使用商店中的 direct-vuex. That way you can access modules directly。

如何使用 typescript 访问其他 Vuex 模块？

How to access other Vuex modules with typescript?

typescript

vuex

vuex-modules