Vue.js - Vuex mapActions（Actions）

最新推荐文章于 2025-09-06 15:46:38 发布

原创最新推荐文章于 2025-09-06 15:46:38 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

前端开发专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何在Vue应用中使用Vuex的mapActions辅助函数来简化组件中store.dispatch的调用。通过示例展示了两种不同的使用方式，并强调了需要在根节点注入store。

mapActions

Dispatching Actions in Components

You can dispatch actions in components with this.$store.dispatch('xxx'), or use the mapActions helper which maps component methods to store.dispatch calls (requires root store injection):

在组件中分发 Action

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

コンポーネント内でのアクションのディスパッチ

this.$store.dispatch('xxx') でコンポーネント内でアクションをディスパッチできます。あるいはコンポーネントのメソッドを store.dispatch にマッピングする mapActions ヘルパーを使うこともできます（ルートの store の注入が必要です）:

컴포넌트 내부에서 디스패치 액션 사용하기

this.$store.dispatch('xxx')를 사용하여 컴포넌트에서 액션을 디스패치하거나 컴포넌트 메소드를 store.dispatch 호출에 매핑하는 mapActions 헬퍼를 사용할 수 있습니다 (루트 store 주입 필요) :

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}