如何使用Vue3与Vuex4和TypeScript设置存储模块?

Question

我想使用TypeScript进入Vue3/Vuex4，但不幸的是，文档没有多大帮助

https://next.vuex.vuejs.org/guide/typescript-support.html

作为初学者，我从一个简单的问题跟踪存储模块开始。在我的问题模块中，我创建了一个索引。

import {
ActionContext,
ActionTree,
GetterTree,
MutationTree,
Store,
} from "vuex";
export default (store: Store<{}>): void => {
store.registerModule("issues", {
namespaced: true,
state,
getters,
actions,
mutations,
});
};
export type Issue = {
title: string;
isOpen: boolean;
createdAt: Date;
};
export type State = {
issues: Issue[];
};
export type Getters = {
issues(state: State): Issue[];
};
export type ActionAugments = Omit<ActionContext<State, State>, "commit"> & {
commit<K extends keyof Mutations>(
key: K,
payload: Parameters<Mutations[K]>[1]
): ReturnType<Mutations[K]>;
};
export enum ActionType {
SubmitIssue = "SubmitIssue",
}
export type Actions = {
[ActionType.SubmitIssue](
context: ActionAugments,
submitIssuePayload: SubmitIssuePayload
): void;
};
export type SubmitIssuePayload = {
issueTitle: string;
};
export enum MutationType {
SubmitIssue = "SUBMIT_ISSUE",
}
export type Mutations = {
[MutationType.SubmitIssue](state: State, payload: SubmitIssuePayload): void;
};
const state: State = {
issues: [],
};
const getters: GetterTree<State, State> & Getters = {
issues: function (state: State): Issue[] {
return state.issues;
},
};
const actions: ActionTree<State, State> & Actions = {
[ActionType.SubmitIssue]: function (
{ commit }: ActionAugments,
{ issueTitle }: SubmitIssuePayload
): void {
commit(MutationType.SubmitIssue, { issueTitle });
},
};
const mutations: MutationTree<State> & Mutations = {
[MutationType.SubmitIssue]: function (
state: State,
{ issueTitle }: SubmitIssuePayload
): void {
const issue: Issue = {
title: issueTitle,
isOpen: true,
createdAt: new Date(),
};
state.issues.push(issue);
},
};

目前，由于一些原因，我被设置卡住了:

• 我从Google复制了ActionAugments。我真的需要自己重新发明ActionContext来访问提交函数吗?
• 设置还不正确。函数store.registerModule显示此错误

.

No overload matches this call.
Overload 1 of 2, '(path: string, module: Module<State, {}>, options?: ModuleOptions | undefined): void', gave the following error.
Type 'GetterTree<State, State> & Getters' is not assignable to type 'GetterTree<State, {}> | undefined'.
Type 'GetterTree<State, State> & Getters' is not assignable to type 'GetterTree<State, {}>'.
'string' index signatures are incompatible.
Type 'Getter<State, State>' is not assignable to type 'Getter<State, {}>'.
Property 'issues' is missing in type '{}' but required in type 'State'.
Overload 2 of 2, '(path: string[], module: Module<State, {}>, options?: ModuleOptions | undefined): void', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'string[]'.ts(2769)
store.ts(26, 3): 'issues' is declared here.
index.d.ts(132, 3): The expected type comes from property 'getters' which is declared here on type 'Module<State, {}>'

这是有意义的，因为全局存储实例的类型是Store<{}>，我的模块似乎期望Store<State>

我该如何解决这个问题?

谢谢你的帮助!

Answer 1

问题是模块状态类型在需要根状态的地方指定，而它们不相同。

最好将根状态类型保留为单独的类型并导入，而不是像{}那样硬编码，因为它可以随时间变化。

应该是store: Store<RootState>,GetterTree<State, RootState>等。其中根状态泛型参数影响Vuex上下文中rootState的类型。