Prefix or scope Vuex mapActions and mapGetters to avoid conflicts

Question

I'm using Vuex store with a user.module that have actions and getters, i import theme in my components like so :

<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>

the script above work just fine, what i want is to scope, namespace or add a prefix to my actions and getters to avoid conflicts with other methods in my components, something like user.isAuthenticated, i tried those combinations, but none of theme did the job :

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

thanks in advance.

Answer 1

You'll have to use the object syntax to map the actions to different names in the component:

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

This is described in the docs.