Vueでのデータの取り方をまとめる。
- immutable properties
- mutable properties
- computed properties
の3つに分けて考えるとわかりやすい。
immutable properties
不変の値。props。
templetes以上では、vue-router経由でidとかだけ受け取れる。
orgnism以下では、親から引き渡される形で使う。
できる限りこちらからデータを取り切るのがポイント。
特にoranism以下では。
mutable properties
変化する値。data。リロードすると中身変わったりする。
templates以上では、サーバーへAPI叩くことで、レスポンスをdataへ流し込む。
時間がかかるのが欠点。
どこでもできるのがstoreを使うパターン。
storeは、どこからでもアクセスできる変数のjsファイル。
プロパティとそれをセットするためのメソッドからなる。
欠点は、どこで初期化すれば良いかわからん点と、リロードすると消える点。
なので、基本的にtemplates以上で、かつlogin情報など消さなくて良いものでしか使いたくない。
storeはアンチパターン。これが言いたかった。
computed properties
これがVue独特の概念で最初苦労した。
computed、つまり、propsやdataもとに、演算された真偽値を置くところ、で覚えるのが良い。
まとめ
コンポーネントごとにデータの取り方を分けて考えると良いと思う。
- templates以上
vue-router経由のpropsと、サーバーからのdata - organism以下
親からのprops
これでFA。storeはしらない。