主なポイント:
Vuex を理解する
Vuexとは
- 概念: Vueで集中状態 (データ) 管理を具体的に実装し、 Vue アプリケーション内の複数のコンポーネントの共有状態を集中管理 (読み取り/書き込み) し、コンポーネント間の通信手段にもなる Vue プラグイン、およびに適しています任意のコンポーネント間の通信
- Vuex Github アドレス
Status is data . 前のケースの todolist の todos と github の ケースの users は、データとステータスの両方です。
ここでは、グローバル イベント バスを使用してデータの読み取りを実現します。つまり、a コンポーネントの情報は全員で使用され、すべて読み取られます
コンポーネントは送信側、他のコンポーネントは受信側
つまり、パラメーター (emit)でイベントをトリガーします: this.$bus.$emit('event name', data)
そして、a コンポーネントで値を読み取りたい他のコンポーネントでは、イベントの定義this.$bus.$on('event name', callback) を記述します。
そして、データの書き込み操作はここで完了します。つまり、a コンポーネントの値が変更されます。
実際、これは前の読み取り操作とは逆です。つまり、コンポーネント a が受信側 (コンポーネント a のデータを変更するために他のコンポーネントからデータを受け取る) であり、他のコンポーネントが送信側であり、データを送信します。
つまり、イベントをコンポーネントにバインドする、つまり this.$bus.$on(''event name".Callback)
他のコンポーネントでイベントをトリガーします。つまり、this.$bus.$emit('event name', data)
図から、ここの x が他のコンポーネントの読み取りおよび書き込み操作を実現していることを見つけるのは難しくありません。これは、x が複数のコンポーネントの共有データであり、データバスを使用してここで共有データを実装することと同じです。これは実際には少し厄介です.ここには多くのコンポーネントはありませんが、データを共有するコンポーネントが10を超えると、面倒になります.
次に、vuex を使用して達成します
まず、vuex はどのコンポーネントにも属していません. あるデータを複数のコンポーネントで使用する必要があると感じた場合は、このデータを共有データとして vuex に入れます. ここに双方向の矢印があります. a コンポーネントを例にとると、a コンポーネントで API が呼び出される限り、データの読み取りと書き込みを完了することができ、vuex 内のデータを変更することができ、vuex 内のデータも、という概念で読み取ることができます。共有
