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

2022-03-03 00:00:00 vue.js vuex vuex-modules

我一直在寻找如何在不键入所有操作名称的情况下在模板中使用Vuex操作,我的代码看起来是这样的:

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

我的articles.mode.js包含操作、getter等,其中一个操作如下:

[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();}

我们可以这样做吗?


解决方案

过了一段时间我自己想明白了,其实很简单.

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

我坚持是因为我习惯了替代语法:

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

所以我只尝试使用[],但是解决方案是使用对象,希望它能有所帮助,很抱歉。 现在,如果我们这样做,它会起作用:

mounted(){this.fetchAll();}

相关文章