[Vue] vuex の動作原理

  1.  最初に、コンポーネントにAPIを記述して呼び出します: dispatch('jia',2)  、キーとパラメーター 2 を渡します
  2. 次に、Actions アクションをオブジェクトとして、API を呼び出します: commit('jia',2)

  3. 次に、ミューテーションでは、ミューテーションはメソッドを持つオブジェクトでもあります。対応するメソッド、メソッドを記述します。このメソッドには、状態と着信値が含まれます。このメソッドに state.sum+=2 を記述している限り、それはmutate 操作を実現することと同等です。

  4. 次に状態に移動します。状態はオブジェクトであり、その中に共有変数があり、その中の対応するデータが変更されます。

  5. 最後に、コンポーネントを再分析してデータを更新します。

そして、ここでのアクションは、Ajax リクエストの送信の戻り値を受け入れることができます

また、操作対象のデータがわかっている場合、つまり、データがコンポーネントで利用可能な場合は、アクションをスキップして直接ミューテーションに進むことができます

例:

レストランに食べに行く例で説明すると

コンポーネントは顧客に相当します.レストランに到着したら、ウェイターを呼び出して、2 つの卵チャーハンを注文します (卵チャーハンはデータ型に相当し、2 は送信されたデータに相当します): dispath ( 'ジア',2)

次に、ウェイター (アクション) がアプリを介して注文するのを手伝い、卵入りチャーハン 2 個が必要な内容を入力します. キッチンに卵付きチャーハン 2 個が必要であることを伝えます: commit('jia',2 )

次に、バック キッチン (ミューテーション) は、 2 人前の卵チャーハンが必要であることを知っているので、それを作ります (データの処理に相当: state.sum+=2)

その後、料理(状態)が完成し、ゲストに渡されます(レンダリング)

また、顧客がシェフに精通している場合、ウェイターは必要なく、シェフはシェフに何を食べるかを直接伝えることができます。これは、アクションを保存することと同じです。

しかし、顧客が店に入って食べ物を注文し、料理が変更されていることに気付いた場合、ウェイターはこの時点で注文する必要があります。これは、データが別のサーバーにあるときにアクションを介して Ajax を送信することと同じです Request対応するデータを取得する

また、ウェイターは、2 つの料理を注文したときに 2 つの料理を一緒に食べることができない場合、追加する前にしばらく待つことに相当することを通知することもできます. 論理的な判断は、アクションで記述する必要があります.

そして、これら 3 つのアクション ミューテーションの状態は、店舗の倉庫で管理する必要があります

これらすべての API にはストアが必要なため、store は不可欠です。

即 store.dispath,store.commit

おすすめ

転載: blog.csdn.net/qq_37308779/article/details/125903917