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

はじめに

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

Vuexとは

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

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

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

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

props

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

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

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

$emit

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

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

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

storeの4つの機能

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

state

getters

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

actions

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

mutations

非同期通信は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: {
  }
})

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

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

Vue.use(Vuex)

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

Vue Components

Stateの取得

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

Actionsの呼び出し

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

localStorageの利用

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

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

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

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

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

所感

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

参考

基礎から学ぶ Vue.js

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

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

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

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