vue.js - 前缀或范围 Vuex mapActions 和 mapGetters 以避免冲突

Question

我正在使用带有动作和吸气剂的Vuex 商店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>

上面的脚本工作得很好，我想要的是范围，命名空间或为我的动作和吸气剂添加一个前缀，以避免与我的组件中的其他方法发生冲突，比如user.isAuthenticated，我尝试了这些组合，但没有一个主题能完成这项工作：

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

提前致谢。

标签： vue.jsvuejs2vuexvuex-modules

Answer 1

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

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

这在文档中有所描述。