vuexのgetters,state,mutations,actionsについて自分用メモ

最近vue.jsとvuexを使ったAPIのつなぎ部分を作成する機会があり、
vuexについて自分用メモを残すために書きます。

actions

actionsはAPIとのデータのやり取りをする場合に使う。
例えば、DBからデータを取ってくる。
なんてときに使うAPIを叩くときにactionsを使うようにする。

mutations

例えば、actionsで取ってきたデータをstateに入れる役割を持っている。
stateのデータを唯一変更することを許されている。
したがって、mutation以外でstateのデータを変更することは基本的にやらないほうが良い
mutation以外でデータを変更してしまうと、データの信頼性が損なわれてしまう。
あとわかりにくいソースになっちゃう。

state

actionsでAPIから取ってきたデータを保存しておくオブジェクトです。

getters

stateにあるデータを取ってくる処理を書く。
gettersがAPIを叩いてデータを取ってくる処理は書かないようにする。

自分用メモとして書いています。
間違った認識しているところがあれば、コメントいただけると幸いです。

参考資料

vuex公式ドキュメント
https://vuex.vuejs.org/ja/