Vuex 模块：不能使用 mapActions答案

【问题标题】：Vuex modules: Can't use mapActionsVuex 模块：不能使用 mapActions
【发布时间】：2020-07-24 11:43:05
【问题描述】：

我不能使用mapActions 来指向我的模块的操作之一。根据文档，默认情况下模块操作在 Vuex 中没有命名空间，因此我的模块的操作应该像主存储操作一样可用。这是我的设置：

商店

import * as ModuleA from './ModuleA';
Vue.use(Vuex);

export default new Vuex.Store({
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {  ... },
    modules: {
      A: ModuleA,
    }
});

模块 A

let ModA = {
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {
        FuncA: function({ commit }, id) {
            //do something
        },
    },
});

export default ModA;

组件

<template>
    ...
</template>
<script>
    import { mapGetters, mapActions } from "vuex";
    export default {
        data() {
        },
        methods: {
            ...mapActions(['FuncA']),
        }
    }
};
</script>

运行它，Vuex 给我以下消息：

未知动作类型：FuncA

我错过了什么？一定与 JS 不是我的专长有关。 :)

【问题讨论】：

尝试代替import * as ModuleA from './ModuleA';，使用import ModuleA from './ModuleA';
就是这样。谢谢一堆。如果你想发帖，我会接受它作为答案。
我为新人添加了答案

标签： javascript vue.js vuex

【解决方案1】：

当我看到您的代码时，我认为您必须更改一些代码才能正确导入基于 ES6 的模块！

所以试试这个：

您的商店

// if you use index.js or store.js to store this codes,
// you have to import 'vue' and 'vuex'
import Vue from 'vue'
import Vuex from 'vuex'
import ModuleA from './ModuleA';

Vue.use(Vuex);

export default new Vuex.Store({
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {  ... },
    modules: {
      ModuleA, // in ES6 if don't need property name for introduce your module
    }
});

你的模块A

// just export it
export default {
    state: { ... },
    getters: { ... },
    mutations: {  ... },
    actions: {
        // I used arrow function syntax, but you can use your syntax
        FuncA({ commit }, id) => {
            //do something
        },
    },
});

【讨论】：

【解决方案2】：

很高兴这解决了您的问题：

所以而不是：

import * as ModuleA from './ModuleA';

使用方法：

import ModuleA from './ModuleA'

默认导出可以使用任何别名直接导入。

【讨论】：

【解决方案3】：

请尝试在您的 mapActions ...mapActions("A",["FuncA"]) 中使用模块名称。您还可以使用对象来更改组件中的操作名称...mapActions("A",{FunctionA:"FuncA"})

【讨论】：

谢谢，但这仅与命名空间模块有关。非命名空间模块不需要这个。