使用 Vuex 和打字稿的正确方法是什么？

Question

到目前为止，我找到的有关该主题的唯一信息是这篇文章。

我正在尝试用 2 个模块实现商店。

export interface RootState {
    /** root state props **/
}

const store: StoreOptions<RootState> = {
    modules: {
        foo,
        bar,
    },
};

export default new Vuex.Store<RootState>(store);

然后我有两个模块：

export interface FooState {
    //(...)    
}

export const foo: Module<FooState, RootState> = {
    //(...)
};

export interface BarState {
    //(...)    
}

export const bar: Module<BarState, RootState> = {
    //(...)
};

一切正常，直到我遇到一种情况，我需要一个来自 foo 模块的 getter 来访问 bar 状态：

export const getters: GetterTree<FooState, RootState> = {
    getInfo: (state, {}, rootState) => number {
        const value = rootState.bar.somevalue;
        //(...)
    },
};

我有一个 linting 错误，说明 rootState 没有 bar 属性。经过一段时间的思考，我设法解决了更改原始 RootState 接口的错误：

export interface RootState {
    /** root state props **/
    foo: FooState;
    bar: BarState;
}

它解决了这个问题，非常适合 IDE 智能感知。

这种方法是否正确？要将所有模块添加到 StoreOptions 使用的 RootState 接口中？

此外，似乎缺乏关于这些类型化接口（StoreOptions、Module、GetterTree 等）的文档：Vuex 是否成熟到可以与 typescript 一起使用？

编辑：我忘了提到：从组件访问商店时，我仍然需要投射 this.$store （但可以使用vuex-class将其最小化）。似乎有一个关于它的问题没有答案。我想到目前为止没有其他解决方案，对吗？

Answer 1

Vuex 与使用这些 vuex 导入的打字稿完全兼容：

import {GetterTree, MutationTree, ActionTree} from "vuex"

下面的例子展示了在打字稿中使用 vuex 的最简单和最完整的方法。

主存储文件：

import Vue from 'vue'
import Vuex from 'vuex'
import { GetterTree, MutationTree, ActionTree } from "vuex"
import MySubModule from '@/store/submodule'

Vue.use(Vuex)

class State {
    userId: string | null = null;
}

const getters = <GetterTree<State, any>>{
};

const mutations = <MutationTree<State>>{
    setUserId(state, payload) {
        state.userId = payload;
    }
};

const actions = <ActionTree<State, any>>{
    fetchUserId(store) {
    }
};

export default new Vuex.Store({
    state: new State(),
    mutations: mutations,
    actions: actions,
    modules: {
        subModuleName: MySubModule,
        //other submodules
    }
})

子模块存储文件：

import { GetterTree, MutationTree, ActionTree } from "vuex"

class State {
}

const mutations = <MutationTree<State>>{
};

const actions = <ActionTree<State, any>>{
};

const MySubModule = {
    namespaced: true,
    state: new State(),
    mutations: mutations,
    actions: actions
};

export default MySubModule;

希望能帮到你！