状態管理＠フロントエンドアーキテクチャ¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. MVVMアーキテクチャ¶
MVVMアーキテクチャとは¶
以下の要素からなる。
- View：UIロジック（HTML）
- ViewModel：状態と振る舞いのロジック（JavaScript）
- Model：モデルそのもの（JavaScript）
ViewとModelの間にViewModelを配置し、ViewとViewModelの間で双方向にデータをやり取り (双方向データバインディング) する。
これによって、ViewとModelの間を疎結合にする。
Vue.jsでは、意識せずにMVVMアーキテクチャで実装できるようになっている。
状態管理との関係性¶
以下の状態管理を使用している場合、MVVMアーキテクチャで構築することになる。
- CSR