Vue Academy · レッスン

MutationsとActions

Q: 「MutationsとActions」で何を学びますか？

mutationsと非同期actionsで状態を変更します ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

mutationsと非同期actionsで状態を変更します

「MutationsとActions」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。

安全なstateの変更

Vuexでは、コンポーネントからstateを直接変更してはいけません。代わりに、すべての変更をミューテーション経由で行います。この明示的な1つの経路により、すべてのstate変更をVue DevToolsで追跡し、デバッグできます。

ミューテーションとは

ミューテーションは、現在のstateを受け取って変更する同期関数です。stateを変更できるのはミューテーションだけです。

mutations: {
  increment(state) {
    state.count++
  }
}

ミューテーションは同期的でなければならない

ミューテーションは同期的に実行する必要があります。ミューテーション内にネットワーク呼び出しのような非同期コードを入れると、DevToolsはstateが実際にいつ変更されたかを追跡できなくなり、タイムトラベルデバッグが機能しなくなります。

ミューテーションのコミット

ミューテーションを実行するには、コンポーネントからthis.$store.commitを使い、名前を指定してコミットします。

methods: {
  add() {
    this.$store.commit("increment")
  }
}

ペイロードの受け渡し

ミューテーションはペイロードと呼ばれる追加の引数を受け取ることができ、変更に必要なデータを渡せます。

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

オブジェクト形式のペイロード

複数の値を渡す場合は、オブジェクト形式のペイロードを使用します。位置引数よりも明確で柔軟です。

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

アクションとは

アクションは非同期処理やビジネスロジックを担当します。アクション自体が状態を変更することはなく、代わりにミューテーションをコミットします。これにより、非同期コードを実際の状態変更から分離できます。

アクションの定義

アクションはコンテキストオブジェクトを受け取ります。そこからcommitでミューテーションをコミットしたり、状態にアクセスしたりできます。

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

コンテキストの分割代入

簡潔に記述するため、コンテキストからcommitを直接分割代入するのが一般的です。

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

アクションのディスパッチ

コンポーネントではthis.$store.dispatchを使ってアクションを実行し、必要に応じてペイロードを渡します。dispatchは非同期アクションに対してPromiseを返します。

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

一連の流れ

一連の流れは次のとおりです。コンポーネントがアクションをディスパッチし、アクションが非同期処理を行ってミューテーションをコミットし、ミューテーションが状態を変更します。その後、リアクティブな状態によってUIが自動的に更新されます。

理解度チェック

ミューテーションとアクションについての理解度を確認しましょう。

まとめ

状態の変更は、同期的に実行されcommitでコミットされるミューテーションを通してのみ行います。非同期ロジックはアクションに記述し、dispatchで実行します。アクションは準備が整ったらミューテーションをコミットします。どちらもデータを渡すためのペイロードを受け取れます。次はゲッターを追加し、ストアをモジュールに分割します。

よくある質問

「MutationsとActions」レッスンは無料ですか？

はい。「MutationsとActions」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。

「MutationsとActions」で何を学びますか？

mutationsと非同期actionsで状態を変更しますブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「MutationsとActions」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

Vuexの基礎
MutationsとActions
GettersとModules

← Vue Academyに戻る