How to map the store action to the component when using class based approach?

Viewed 858

this is my vuejs component and I'm using class based appraoch.

<template>
    //template body here
</template>

<script>
import Vue from "vue";
import moment from "moment";
import Component from "vue-class-component";
import { State, Action, Mutation, namespace } from "vuex-class";

const homeModule = namespace("../store/modules/list");  //path is OK

export default class List extends Vue {
    @State(state => state.list.apps) items;     //working properly
    @homeModule.Action("fetchItems") fetchItems;    //not working

    mounted() {
        this.fetchItems();
    }

}
</script>

This is my store/modules/list.js.

const state = {
    items: []
};

const mutations = {
    setItems(state, items) {
        state.items = items;
    }
};

const actions = {
    async fetchItems({ commit }) {
        const {data} = //Make a request for fetching the items
        commit('setItems', items);
    }
};

export default {
    namespaced: true,
    state,
    actions,
    mutations
};

Now, I am able to get the list of items from the store. But not able to map the action with the component. It is showing error [vuex] module namespace not found in mapActions(): ../store/modules/list/

Any help would be appreciated. Thanks

1 Answers

If you still have a problem, you are passing wrong path in line

const homeModule = namespace("../store/modules/list");

is should be path in namespaced store, not a path to file, so it should be like:

const homeModule = namespace("list");

if your module is registered under list key

Related