具有自定义名称的Vuex操作,Vuex模块和mapAction

时间:2018-11-15 11:39:13

标签: vue.js vuex vuex-modules

我被困在寻找如何在模板内使用Vuex动作而不输入所有动作名称的方法,这就是我的代码的样子:

export default new Vuex.Store({ modules: articles, auth, blabla})

我的articles.module.js包含操作,获取器等,其中一个操作如下:

[ArticleActions.remote.FETCH_ALL]({commit}) {something axios stuff}

它以命名空间true导出:

export const articles = {
namespaced: true,
state: initialState,
mutations,
actions,
getters
};

在我的组件ArticleList.vue中,我想将该动作与mapActions一起使用:

 methods: {
        ...mapActions('articles', [ArticleActions.remote.FETCH_ALL])
 }

这可行,但是我不想在模板中使用ArticleActions.remote.FETCH_ALL的值

methods: {
        ...mapActions('articles', [{fetchAll: ArticleActions.remote.FETCH_ALL}])
 }

所以我只需要:

mounted(){fetchAll();}

代替

mounted(){ArticleActions.remote.FETCH_ALL();}

我们能做到吗?

1 个答案:

答案 0 :(得分:1)

一段时间后,我自己弄清楚了,实际上很容易...

...mapActions('articles', {
                fetchAll: ArticleActions.remote.FETCH_ALL,
            }
        ),

我之所以陷入困境,是因为我习惯了其他语法:

...mapGetters("articles", [
            'articles',
        ])

所以我只尝试使用[],但是解决方案使用的是Objects,希望对您有所帮助,对不起。 现在,如果我们这样做,它将起作用:

mounted(){this.fetchAll();}