typescript - 如何使用 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 只是 {}，就 typescript 而言，它无法访问根存储的 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 ;
}

关于 Action (无变化)

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

关于 Action (功能)

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

// ...

如果你的 rootState 正在经历很多变化，你可以暂时跳过这个(不推荐)

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