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

Question

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

Answer 1

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

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