在 vue js 中使用 mapActions 的确切目的是什么？答案

【问题标题】：What is the exact purpose of using mapActions in vue js?在 vue js 中使用 mapActions 的确切目的是什么？
【发布时间】：2021-02-04 11:50:13
【问题描述】：

在学习 Vue js 时，我在代码的许多部分中使用 mapState 来更新渲染中的更改，每当存储层发生更改时。最近，我也了解了 vuex 中的mapActions。但在我搜索的大多数示例中，我只使用查看 mapState。那么，什么是 mapAction，它的确切用途是什么？

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

在 Vuex 中，actions（通常）是执行突变的异步操作，而不是直接更新状态。 mapActions 只是一个帮助器，可让您从 Vue 组件中调用这些方法。你可以在这里找到更多信息：https://vuex.vuejs.org/guide/actions.html

【讨论】：

【解决方案2】：

在组件中，可以通过this.$store.dispatch来dispatch action，也可以使用mapActions将action绑定到组件的方法上。

通常，动作可能属于namespace，而mapActions在这种情况下可以正常工作。

// 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']),
},

【讨论】：