CODEWITHSUNDEEP
vue.jsvuex
bin ye
bin ye

Reputation: 33

How to configure Vue mapActions

vue-cli store

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

enter image description here

How to set up mapActions path in the Vue component?

Upvotes: 2

Views: 9662

Answers (1)

Brian Lee
Brian Lee

Reputation: 18197

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

Upvotes: 6

Related Questions