Vuex でのミューテーションとアクションの使用方法の詳細な説明

今回は、Vuex でのミューテーションとアクションの使用方法と、ミューテーションとアクションを使用する際の注意事項について詳しく説明します。実際のケースを見てみましょう。

アクションとミューテーションの違いは、競合問題を解決することではなく、devtools を使用して ステータスの変化を追跡できるようにすることです。 実際、vuex のアクションは単なるアーキテクチャ

の概念であり、最終的にはミューテーションがトリガーされる限り、単なる

関数 にすぎません。 。非同期競合状態にどう対処するかはユーザー自身の仕事です。 vuex の唯一の本当の制限は、突然変異が同期的でなければならないことです (redux では、reducer のようなものです) 次の状態に同期的に戻る必要があります)。同期の意味は、各ミューテーションが実行された後、新しい状態 (リデューサーと同じ) に対応できることです。 devtools のスナップショットを撮って保存すると、自由に タイムトラベル

することができます。 devtool をオンにし、非同期メソッドを呼び出した場合 アクションを実行すると、呼び出した突然変異がいつ記録されたかを明確に確認でき、対応するステータスをすぐに確認できます。

個人テスト:

ミューテーションで非同期操作が行われると、dev-toolsではすぐにスナップショットが出力されますが、非同期操作はまだ完了しておらず、この時のスナップショット情報は間違っています。 アクションで非同期操作を実行する場合、dev-tools は非同期操作が完了するまで待ってから、ミューテーションのスナップショットを印刷します。これにより、タイムトラベルを確認し、特定のミューテーションの変更を確認することが容易になります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Yuansheng JSでtodolist関数を実装する方法

FileReaderは画像をアップロードする前にローカルプレビューを実装します

以上がVuex でのミューテーションとアクションの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。