Модули Vuex: невозможно использовать mapActions

Question

Я не могу использовать 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 не моя специальность. :)

Answer 1

Я рад, что это решило вашу проблему:

Так что вместо:

import * as ModuleA from './ModuleA';

Для использования:

import ModuleA from './ModuleA'

Экспорт по умолчанию можно импортировать напрямую с любым псевдоним.

Answer 2

Поскольку я вижу ваши коды, я думаю, что вам нужно изменить некоторые коды, чтобы правильно импортировать ваши модули на основе ES6 !!

, поэтому попробуйте это:

1. ваш магазин

// 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
        },
    },
});

Answer 3

Пожалуйста, попробуйте использовать имя модуля в вашей карте. Действия ...mapActions("A",["FuncA"]). Вы также можете использовать объекты для изменения имени действия в вашем компоненте ...mapActions("A",{FunctionA:"FuncA"})