前缀或范围 Vuex mapActions 和 mapGetters 以避免冲突答案

【问题标题】：Prefix or scope Vuex mapActions and mapGetters to avoid conflicts前缀或范围 Vuex mapActions 和 mapGetters 以避免冲突
【发布时间】：2019-02-13 07:33:11
【问题描述】：

我将 Vuex 商店 与具有 actions 和 getter 的 user.module 一起使用，我在我的组件中导入主题，如下所示：

<template>
     ...

     <login-form v-if="!isAuthenticated"/>

     ...
</template>

<script>
    import { mapActions, mapGetters } from 'vuex'

    export default { 

        ...

        computed :{
            ...mapGetters('user', ['isAuthenticated', 'isProcessing']),
        },
        methods:{
            ...mapActions('user', ['getUser']),
        }

        ...
    }
</script>

上面的脚本工作得很好，我想要的是作用域、命名空间或添加前缀到我的操作和吸气剂中，以避免与我的组件中的其他方法发生冲突，比如 @ 987654323@，我尝试了这些组合，但没有一个主题能胜任：

...mapActions('user', ['user/getUser'])
...mapActions('user', ['user.getUser'])
...mapActions('user/user', ['getUser'])
...mapActions('user.user', ['getUser'])

提前致谢。

【问题讨论】：

标签： vue.js vuejs2 vuex vuex-modules

【解决方案1】：

您必须使用对象语法将操作映射到组件中的不同名称：

...mapActions('user', {
  prefix_getUser: 'getUser',  // this.prefix_getUser -> user/getUser action
  prefix_getFoo: 'getFoo',    // this.prefix_getFoo  -> user/getFoo action
})

这在docs 中有描述。

【讨论】：