はじめに

Vuexについて学んだことをまとめています。随時更新していきます。

Vuexとは

データとその状態に関するすべてを一元管理する「状態管理」のための拡張ライブラリ。

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

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

Vuexは状態を管理するためにstoreと呼ばれるアプリケーションのデータの状態を保持するコンテナを作成する。

前提知識～コンポーネント間のデータの受け渡し～

props

propsは親コンポーネントから子コンポーネントにデータを渡すときに使う。

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

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

この属性で渡し、propsで受け取るというデータフローをprops downと呼ぶ。

$emit

$emitは子コンポーネントの状態に応じて、親コンポーネントに何かアクションを起こさせたり、データを渡したい際にカスタムイベントと一緒に使用。

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

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

この$emitで渡しonで受け取るというデータフローをevent upと呼ぶ。

storeの4つの機能

storeには「state」、「getters(コンポーネント)」、「actions」、「mutations」の4つの機能がある。(一方通行になっている。)

state

アプリケーション全体のデータの状態を管理する。コンポーネントでいうdata的役割を担う。

getters

stateを取得するための算出データ。Vueのcomputedと同様の働きをする。

算出プロパティと違い引数を渡せるが、セッター機能はない。

actions

データの加工や非同期処理を行い、mutationへコミットする。mutationsの呼び出しに加え、API通信を含めることができる。

this.$store.dispatch('アクション名')でactionsを実行できる。任意で第二引数を持たせることができる。

mutations

stateを更新できる唯一のメソッド。コンポーネントでいうmethodsと同様の働きをする。

非同期通信はactionsで行うので、mutationsは同期的でなければならない。(デバッグの観点から)

storeテンプレート

デフォルトで下記のようなテンプレートが作成される。

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

modulesはストアの定義を複数のファイルに分割して利用する際に用いる。小規模の場合はここをgettersに変える。

個人的にはstoreは一方通行なので、以下のように入れ替えたほうが整理しやすい。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  actions: {
  },
  mutations: {
  }
})

Vue Components

※具体的なコードは明示できておりません。猫本や公式ドキュメントを参考にしていただけますと幸いです。

Stateの取得

mapStateを利用。stateで定義されたデータの名前と同じ名前の文字列でstateの値を.vueファイルで取得できる。

オブジェクトスプレッド演算子（...）を用いることで、computedのローカルのオブジェクトと一緒に定義できる。

Actionsの呼び出し

基本的に.vueファイルのmethodsオプション内でActionsをDispatch(呼ぶ)形になる。

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

localStorageの利用

※かなりざっくりです。個人的にはfirebaseとかContentfulとかあるのでそっち使ったほうがいい気がします※

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

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

以下でlocalStorageに保存したリストを取得。キーと値のセット(JSON形式の文字列型)でデータを扱う。

const savedLists = localStorage.getItem('設定したキー')

保存する

localStorage.setItem('設定するキー', 文字列型のデータ)

所感

少しずつ理解できてきましたが、できればVuexは使わずにポートフォリオを作りたいなと思ってしまいました。(小規模だと逆に複雑に。)

色々と記事を読んでいると実際Vuexを使うかどうかは判断が難しい部分があるみたいですね。

参考

基礎から学ぶ Vue.js

【Vue.js】propsを使う時は命名に注意。サンプルコード有

【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り

vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解

【Techpit】Vue.js/Vuexを使ってTrello風アプリを作成しよう！

特にTechpitの教材はがっつりVuexを使うので個人的におすすめです。