使用基于类的方法时如何将商店操作映射到组件？答案

【问题标题】：How to map the store action to the component when using class based approach?使用基于类的方法时如何将商店操作映射到组件？
【发布时间】：2019-10-31 00:50:43
【问题描述】：

这是我的vuejs 组件，我正在使用基于类的方法。

<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>

这是我的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
};

现在，我可以从商店中获取商品列表。但无法将操作与组件映射。它显示错误[vuex] module namespace not found in mapActions(): ../store/modules/list/

任何帮助将不胜感激。谢谢

【问题讨论】：

你为什么不使用通常的方法呢？ ...mapState('storeModule',['fieldName'])
只是因为语法清晰

标签： vue.js vuex vue-class-components

【解决方案1】：

如果你仍然有问题，你在行中传递了错误的路径

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

应该是命名空间存储中的路径，而不是文件路径，所以应该是这样的：

const homeModule = namespace("list");

如果您的模块在list 键下注册

【讨论】：