As I am learning Vue.js, I use mapState in many parts of my code for updating changes in rendering, whenever a change occurs in store layer. Recently, I also came to know about mapActions in vuex. But in most of the examples I search, I only use to see mapState. So, what is mapAction and its exact purpose?

As I am learning Vue.js, I use mapState in many parts of my code for updating changes in rendering, whenever a change occurs in store layer. Recently, I also came to know about mapActions in vuex. But in most of the examples I search, I only use to see mapState. So, what is mapAction and its exact purpose?

• javascript
• jquery
• vue.js

Share Improve this question Follow edited Feb 7, 2023 at 13:26 Luke Girvin 13.5k1010 gold badges6767 silver badges8585 bronze badges asked Feb 4, 2021 at 11:50 Krishna KrishzzKrishna Krishzz 6111 gold badge11 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

In the ponent, you can dispatch actions through this.$store.dispatch, or use mapActions to bind actions to the ponent's methods.

Usually, actions may belong to a namespace, and mapActions can work well in this case.

// use $store.dispatch
methods: {
  addTodo() {
    this.$store.dispatch('xxx/yyy/zzz/addTodo');
  },
  removeTodo() {
    this.$store.dispatch('xxx/yyy/zzz/removeTodo');
  },
},
// use mapActions
methods: {
  ...mapActions('xxx/yyy/zzz', ['addTodo', 'removeTodo']),
},

In Vuex, actions are (usually) asynchronous operations which carry out mutations, as opposed to direct updates to the state. mapActions is just a helper that lets you call those methods from within a Vue ponent. You can find more info here: https://vuex.vuejs/guide/actions.html

By mapping actions you can build modularized apps, which will help you to minimize the overhead of maintaining method declarations in your page/ponents.