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

Question

我正在使用 Vuex store 和 user.module 有 actions 和 getters，我像这样在我的组件中导入主题：

<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，我尝试了这些组合，但是 none 的主题完成了工作：

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

提前致谢。

Answer 1

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

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

这在docs中有描述。

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

Prefix or scope Vuex mapActions and mapGetters to avoid conflicts

vue.js

vuejs2

vuex

vuex-modules