如何使用打字稿访问其他 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. 那么如何在moduleB 的action 中获取moduleA 的状态呢？

这是一个代码和框：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> = {
// ...