具有自定义名称的 Vuex 动作、vuex 模块和 mapActions

Question

我一直在寻找如何在模板中使用 Vuex 动作而不输入所有动作名称，这就是我的代码的样子：

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

我的articles.module.js 包含动作、getter 等，其中一个动作如下所示：

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

它以命名空间为真导出：

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

我们能做到吗？

Answer 1

过了一段时间我自己弄明白了，实际上很容易......

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

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

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

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

mounted(){this.fetchAll();}