Question

我正在尝试使用打字稿编写Vuex存储（不使用vuex-module-decorators，仅使用简单的Vuex +打字稿来简化操作）。我的根存储没有状态，只有模块：

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: {}
}

与moduleB一样：

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的操作中获取moduleA的状态？

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

Answer 1

为了使用Vuex进行类型安全，可以使用direct-vuex。这样，您可以从商店访问模块directly。

Answer 2

打字稿您的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> = {
// ...

如何使用打字稿访问其他Vuex模块？

2 个答案: