다른 Vuex 모듈에 타입스크립트로 접근하는 방법?

다른 Vuex 모듈에 타입스크립트로 접근하는 방법?

타입스크립트로 Vuex 스토어를 작성하려고 하는데 (사용하지 않음)vuex-module-decorators, 단순한 Vuex + 단순함을 유지하기 위한 형식).루트 저장소에 상태가 없고 모듈만 있는 경우:

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

모듈 A에는 다음과 같은 상태가 있다.

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의 상태가 작동 중인가?

여기 코드 앤 박스: https://codesandbox.io/embed/vuex-typescript-modules-x7f7s (매장은 안에 있다)App.vue저기에

typecript your 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다이렉트 뷔엑스를 쓰세요.그래야 가게에서 직접 모듈에 접근할 수 있다.

참조URL: https://stackoverflow.com/questions/57979740/how-to-access-other-vuex-modules-with-typescript