高度なvueテクノロジスタック(04.状態管理、バス、状態、ゲッター)(2020-04-16 21:19)

1.子コンポーネントと親コンポーネントの間で値を渡す

子コンポーネントは、イベントの形式で親コンポーネントに渡されます

ここに画像の説明を挿入
ここに画像の説明を挿入

同じファイルのサブコンポーネント間の値の転送

単一方向のフローを渡すための仲介として親コンポーネントを使用します
ここに画像の説明を挿入

異なるファイルのサブコンポーネント間で値を渡す(コンポーネント内の異なるコンポーネントなど、コンポーネントにロジックコードを記述するのは不便です)[バス]

Bus使用して値を渡すことができます(Busは新しいVueインスタンスオブジェクトであり、グローバルVueオリジナルプロトタイプオブジェクトにマウントされているため、ルートコンポーネントでのBusデータ状態の変更をリッスンして値を送受信できます)
ここに画像の説明を挿入

2. Vuexの状態管理

Vuexのワークフロー

ここに画像の説明を挿入

Vuexの構造

ここに画像の説明を挿入
ここに画像の説明を挿入

------状態属性は(データ属性)と同等

state.jsで定義、index.jsで導入

コンポーネントの状態で定義された値を取得する最初の方法

ここに画像の説明を挿入

コンポーネントの状態の値を定義する2番目の方法(mapStateを使用)

ここに画像の説明を挿入

モジュールの名前空間を開くことができます(簡単にアクセスできます)

ここに画像の説明を挿入
1.
ここに画像の説明を挿入
2。
ここに画像の説明を挿入

------ getters属性は(計算属性)と同等

gettersモジュールの定義形式は以下の通りです
ここに画像の説明を挿入

コンポーネントのゲッターで定義された値を取得する最初の方法

・

コンポーネントのゲッターで定義された値を取得する2番目の方法(mapGettersを使用)

ここに画像の説明を挿入
2.
ここに画像の説明を挿入
3。
ここに画像の説明を挿入

おすすめ

転載: www.cnblogs.com/jackson1/p/12721546.html