vuex 中 { dispatch, commit } 的类型是什么？

Question

我有 vujes 打字稿项目，在 vuex 商店我得到了类似的东西：

async getUserProfile ({ dispatch, commit }: any) {}

好吧，我不想要，any因为那很糟糕，而且您在编辑器中没有帮助/自动完成功能。我找到了这个import { Dispatch, Commit } from "vuex";但是如何将该信息传递给{ dispatch, commit }: any

Answer 1

你使用ActionContext<S, R>，就像 Vuex 一样：

getUserProfile( context: ActionContext<S, R>) {}

哪里S是State和R是RootState。

然后调用dispatch和commit关闭的背景下：

 context.dispatch('action')
 context.commit('mutation')

Answer 2

您可以在此文件中查看可用的 vuex 类型：

node_modules/vuex/types/index.d.ts

// 第 49 行：

export interface Commit {
  (type: string, payload?: any, options?: CommitOptions): void;
  <P extends Payload>(payloadWithType: P, options?: CommitOptions): void;
}

您可以像这样导入和使用它而不是 ActionContext：

import { Commit } from 'vuex';

const actions = {
    loadUser ({ commit }: { commit: Commit }, user: any) {
        commit('setUser', user);
    },

    ...
};

希望有帮助:)

Answer 3

如果您愿意，您仍然可以解构上下文对象。

import { ActionContext } from 'vuex';
import { RootState } from './types';

const actions = {
    // destructured
    loadUser ({ commit }: ActionContext<RootState, RootState>, user: any) {
        commit('setUser', user);
    },

    // not destructured
    loadUser (context: ActionContext<RootState, RootState>, user: any) {
        context.commit('setUser', user);
    },
};