【Vue.js】Vuexのまとめ【図も作成しました】

<h2>はじめに</h2>
Vuexについて学んだことをまとめています。随時更新していきます。
<h2>Vuexとは</h2>
データとその状態に関するすべてを一元管理する「状態管理」のための拡張ライブラリ。

コンポーネントが構造化した際に、コードの構造と保守性をアップできる。

具体的には、深くネスト(親子関係を持つ)されたコンポーネントの構造でデータを共有するのに、propsと$emitを繰り返すことを防ぐ。

Vuexは状態を管理するために<strong>store</strong>と呼ばれるアプリケーションのデータの状態を保持するコンテナを作成する。
<h2>前提知識～コンポーネント間のデータの受け渡し～</h2>
<h3>props</h3>
propsは親コンポーネントから子コンポーネントにデータを渡すときに使う。

親が定義した属性を、子コンポーネントのpropsで指定して受け取る。

その際に、v-bindなどのテータバインディングを用いて、リアクティブなデータを渡すことが可能。

この属性で渡し、propsで受け取るというデータフローを<span style="color: #ff0000;"><strong>props down</strong></span>と呼ぶ。
<h3>$emit</h3>
$emitは子コンポーネントの状態に応じて、親コンポーネントに何かアクションを起こさせたり、データを渡したい際にカスタムイベントと一緒に使用。

カスタムイベントはv-on:clickのようなフックをするためのイベントタイプをじさくできるもの。

$emitはコンポーネントに紐づいているイベントを明示的に発火させるメソッド。

この$emitで渡しonで受け取るというデータフローを<span style="color: #ff0000;"><strong>event up</strong></span>と呼ぶ。
<h2>storeの4つの機能</h2>
<img class="alignnone wp-image-760" src="https://chobimusic.com/wp-content/uploads/2020/03/store.jpg" alt="" width="675" height="504" />

storeには「state」、「getters(コンポーネント)」、「actions」、「mutations」の4つの機能がある。(一方通行になっている。)
<h3>state</h3>
アプリケーション全体のデータの状態を管理する。コンポーネントでいうdata的役割を担う。
<h3>getters</h3>
stateを取得するための算出データ。Vueのcomputedと同様の働きをする。

算出プロパティと違い引数を渡せるが、セッター機能はない。
<h3>actions</h3>
データの加工や非同期処理を行い、mutationへコミットする。mutationsの呼び出しに加え、API通信を含めることができる。

<code>this.$store.dispatch('アクション名')</code>で<code>actions</code>を実行できる。任意で第二引数を持たせることができる。
<h3>mutations</h3>
stateを更新できる唯一のメソッド。コンポーネントでいうmethodsと同様の働きをする。

非同期通信はactionsで行うので、mutationsは同期的でなければならない。(デバッグの観点から)
<h2>storeテンプレート</h2>
デフォルトで下記のようなテンプレートが作成される。

<code>store/index.js</code>
<pre>import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})</pre>
modulesはストアの定義を複数のファイルに分割して利用する際に用いる。小規模の場合はここをgettersに変える。

個人的にはstoreは一方通行なので、以下のように入れ替えたほうが整理しやすい。
<pre>import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  actions: {
  },
  mutations: {
  }
})</pre>
<h2>Vue Components</h2>
※具体的なコードは明示できておりません。<a href="https://www.amazon.co.jp/dp/B07D9BYHMZ/ref=dp-kindle-redirect?_encoding=UTF8&amp;btkr=1">猫本</a>や<a href="https://vuex.vuejs.org/ja/guide/actions.html">公式ドキュメント</a>を参考にしていただけますと幸いです。
<h4>Stateの取得</h4>
<a href="https://vuex.vuejs.org/ja/guide/state.html#mapstate-%E3%83%98%E3%83%AB%E3%83%91%E3%83%BC">mapState</a>を利用。stateで定義されたデータの名前と同じ名前の文字列でstateの値を.vueファイルで取得できる。

オブジェクトスプレッド演算子（<code>...</code>）を用いることで、<code>computed</code>のローカルのオブジェクトと一緒に定義できる。
<h4>Actionsの呼び出し</h4>
基本的に.vueファイルのmethodsオプション内でActionsをDispatch(呼ぶ)形になる。

以下、理解を深めるために前述の自作資料に追記してみました。(難しい)

<img class="alignnone size-full wp-image-1159" src="https://chobimusic.com/wp-content/uploads/2020/03/vuex2-1.jpg" alt="" width="1253" height="937" />
<h2>localStorageの利用</h2>
※かなりざっくりです。個人的にはfirebaseとかContentfulとかあるのでそっち使ったほうがいい気がします※

localStorageを用いることで、ブラウザにデータを保存して同じ状態を保つことができる。データは永続的に有効。

(ストアの状態はリロードされると初期化されてしまう。)

以下でlocalStorageに保存したリストを取得。キーと値のセット(JSON形式の文字列型)でデータを扱う。
<pre><span class="hljs-keyword">const</span> savedLists = localStorage.getItem(<span class="hljs-string">'設定したキー'</span>)</pre>
保存する
<pre>localStorage.setItem(<span class="hljs-string">'設定するキー'</span>, 文字列型のデータ)</pre>
<h2>所感</h2>
少しずつ理解できてきましたが、できればVuexは使わずにポートフォリオを作りたいなと思ってしまいました。(小規模だと逆に複雑に。)

色々と記事を読んでいると実際Vuexを使うかどうかは判断が難しい部分があるみたいですね。
<h2>参考</h2>
<p id="title" class="a-size-large a-spacing-none"><a href="https://www.amazon.co.jp/dp/B07D9BYHMZ/ref=dp-kindle-redirect?_encoding=UTF8&amp;btkr=1"><span id="ebooksProductTitle" class="a-size-extra-large">基礎から学ぶ Vue.js</span></a></p>

<a href="https://dev83.com/vue-props/">【Vue.js】propsを使う時は命名に注意。サンプルコード有</a>

<a href="https://orizuru.io/blog/vue-js/vue_emit-props/">【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り</a>
<p class="it-Header_title"><a href="https://qiita.com/fruitriin/items/42b0ebc5f8a524a0ae17">vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解</a></p>
<p class="course-title course-small"><a href="https://www.techpit.jp/p/vue-js-vuex-trello">【Techpit】Vue.js/Vuexを使ってTrello風アプリを作成しよう！</a></p>
特にTechpitの教材はがっつりVuexを使うので個人的におすすめです。