vuex：未知动作类型 -> 带有 Typescript 的 Vue 3答案

【问题标题】：vuex: unknown action type -> Vue 3 with Typescriptvuex：未知动作类型 -> 带有 Typescript 的 Vue 3
【发布时间】：2021-07-02 06:57:47
【问题描述】：

我正在使用 Vue 3 和 typescript 在我的应用程序中实现 vuex。调用函数时出现以下错误：[vuex] unknown action type: documentModule/deleteDocument

我将在下面留下一些已实现的代码，以防有人知道如何告诉我错误。

documet-module.ts

const state = {
    fileDto: FileDto
}

const mutations = {
    DELETE_DOCUMENT(state: any, payload: any) {
        return true;
    },
}

const actions = {
    async deleteDocument({ commit }: any, id: number) {
        await itiHttpService.delete(API.documents + '/' + id, null).then((response: any) => {
            commit('DELETE_DOCUMENT', response.data)
        });
    }
}

const getters = {
}

const documentModule = {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

export default documentModule;

index.ts

export default createStore({
    modules: {
        documentModule
    }
});

main.ts

const app = createApp(App);
const emitter = mitt();

app.use(router);
app.use(i18n);
app.use(store);
app.provide('emitter', emitter);
app.config.globalProperties.$appInfo = appInfo;
app.mount('#app');

document-list.ts

function deleteDocument() {

    const message: string = `¿Eliminar documento${((selectedRowKeys.value.length === 1) ? "" : "s")}?`;

    MessageService.confirm(message, null, async (res) => {
        if (res) {
            for (const element of selectedRowKeys.value) {
                store.dispatch('documentModule/deleteDocument', element);
            }
            dataGrid.value.instance.refresh();
        }
    });
}

拜托，我需要有人帮我找出错误。

【问题讨论】：

标签： typescript vue.js vuejs3

【解决方案1】：

您展示的内容应该有效（如下所示）。您没有在代码中包含导入，但您确定那里没有问题吗？

const store = Vuex.createStore({
  modules: {
    documentModule: {
      namespaced: true,
      state: {
        fileDto: 'abcd'
      },
      mutations: {
        DELETE_FILE(state, payload) {
          console.log('mutated');
          state.fileDto = null;
        }
      },
      actions: {
        deleteFile({
          commit
        }, id) {
          console.log('called!');
          commit('DELETE_FILE');
        }
      }
    }
  }
})
const app = Vue.createApp({});
app.use(store);
store.dispatch('documentModule/deleteFile');

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vuex@4"></script>

<html>

<body>
  <div id="#app"></div>
</body>

</html>

【讨论】：