CODEWITHSUNDEEP
javascriptvue.jsvuex
dotNET
dotNET

Reputation: 35440

Vuex modules: Can't use mapActions

I can't use mapActions to point to one the actions of my modules. According to the docs, module actions by default are not namespaced in Vuex, so the actions of my module should be available just like the main store actions. Here is my setup:

Store

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

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

Module A

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

export default ModA;

Component

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

Running it, Vuex gives me the following message:

unknown action type: FuncA

What am I missing? Must have something to do with the fact that JS is not my specialty. :)

Upvotes: 0

Views: 1428

Answers (3)

Milad Mohammadi
Milad Mohammadi

Reputation: 174

As I see your codes, I think that you have to change some codes to import your modules based on ES6 correctly!!

so try this one:

  1. your store
// 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
    }
});
  1. your ModuleA
// 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
        },
    },
});

Upvotes: 0

adnanmuttaleb
adnanmuttaleb

Reputation: 3624

I am glad this solved your problem:

So instead of:

import * as ModuleA from './ModuleA';

To use:

import ModuleA from './ModuleA'

Default export can be Imported directly with any alias.

Upvotes: 1

protob
protob

Reputation: 3583

Please try to use the module name in your mapActions ...mapActions("A",["FuncA"]). You can use also objects to change the action name in your component ...mapActions("A",{FunctionA:"FuncA"})

Upvotes: 0

Related Questions