なぜ必要なのか

読者が本や記事を保存する読書棚を作るとします。表示と件数を一致させたい。制作側は表示を一つずつ書き換える代わりに、HTMLに近いテンプレートを反応的な状態に結び付けたいと考えます。

どう解決するのか

現場ノートのカード2枚は未保存で開始します。図書館の本を保存すると、そのカードだけ保存済みになり、庭の記事は変わりません。庭の記事も保存すると合計は1から2になります。同じカードを再び保存しても合計は2です。図はリアクティブな状態とテンプレートをつなぎます。リセット・再読み込みで両方を消します。永続保存はありません。

Vue: 概念シミュレーション

概念シミュレーション

Vue

各カードを保存します。カードごとに1回だけ数え、もう一方は変わりません。

01 · ロジック：リアクティブ状態

図書館の本: 0 · 庭の記事: 0

02 · テンプレート：状態の結び付け

図書館の本

読むものリスト

庭の記事

読むものリスト

03 · スタイル：カードの表示

記述は1ファイル。配信時の構成は別です。

保存数: 0 / 2

待機

実行境界
ブラウザー模型：クリック後にカード状態と共通記録が表示を更新します。
状態と責任
一つの記録集合が件数の元です。再読み込みで消えます。実際の保存にはサービスが必要で、Vue自体は読み込みません。

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

どんな考え方なのか

Vueはテンプレートをリアクティブな状態に結び付けます。単一ファイルコンポーネントはロジック・テンプレート・スタイルの記述形式であり、通信ファイル1つを保証しません。

共有状態の管理と外部保存は別に決めます。

出典