How to configure Vue mapActions

Question

vue-cli store

my code like this: ...mapActions('some/nested/module',[ 'getCountry', 'getCurrency' ]),

How to set up mapActions path in the Vue component?

Answer 1

mapActions is used in a component's methods property.

// my-component.vue
import { mapActions } from 'vuex'

export default {
    ...
    methods: {
        ...mapActions('namespaced/module', [
            'myAction',
            'myOtherAction'
        ])
    }
}

The namespace can determined by the module's filename. For example, given a file - moduleA.js - getters, mutations, actions would be namespaced as moduleA/someGetter, moduleA/someAction, moduleA/someMutation.

...mapActions('moduleA', [
    'someAction',
    'anotherAction'
])

When the module is registered, all of its getters, actions and mutations will be automatically namespaced based on the path the module is registered at

The other way is using the registerModule method, which allows for dynamic runtime registration:

// register a module `myModule`
store.registerModule('myModule', {
  // ...
})

// register a nested module `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

Vuex Docs - Namespacing

Vuex Docs - Dynamic Module Registration