Vuex

VADS

https://gyazo.com/9cebf0a85218d5384965f808a730dd7f

https://gyazo.com/eab9ed34e16e0cf6a435cfa2e54b69ff

stateにsingle source of trueがあり

viewで、ユーザーに表示され

actionで、ユーザーのアクションに反応して、stateを変更する。

links:

ここがわかりやすそう。全部はみてない。

model同士の結合度をコントロールするのはかなりの設計面の技術力が要求され

model層が発生するとそれだけ複雑になりますし、イベントが誰から発行されたのかの管理も難しいです

Stateが代入構文しか受け付けない為、Object.assignですり抜ける以外にStateでUnionTypeを使う方法がないです

標準で用意されているタグやコンポーネント名と同じ名前のコンポーネント名を付けたい場合は、The prefixを付けるなどして、必ず別名

templateで必要じゃないmethodは極力vueに定義しない

data ではなく、computedを使う

setterがないcomputed はread onlyだからです

template内の式は、methodsに

そうtemplateタグはなんとマウントされる際に表示されないのです

v-if, v-forなどで重宝する

UIライブラリを活用する。

意味のない文

名詞と動詞

グラフを頭に入れる。どうやって？

名詞（モノ）と動詞(矢印)がある。

名詞は、

Vue Components, Actions, Mutations, State. Stateだけが単数なのでは、わざと単一にしてる。管理コストを下げるのが目的。

動詞は、

Dispatch, Commit, Mutate, Render

Dispatch

Action, Commit

dispatch("signUpUser", signUpData)なら、この"signupUser"がaction名となる引数で、

index.js内に、actionsというオブジェクトがあり、この中の signUpUserメソッドのキーがあれば、そのvalueを実行する

value部分は、関数型になっており、最初の引数で、commitオブジェクトを取って、次の引数でdispatchが実行された時の第二引数を(改めて)引数として取る。

大きな目的の外部APIを通信もする。

API通信の結果により、必要なcommitをする(commitオブジェクトは、これも関数型なので実行する)

Mutate

mutationsオブジェクトは、commitオブジェクトの関数実行から呼ばれ実行する

その中で、mutate操作をする。mutate操作とは、stateの変更

state

stateが変更されると、UIにbindされてるstateがあれば、UIも変更される。