はじめに
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】propsを使う時は命名に注意。サンプルコード有
【Vue.js】【図解】emit、propsを使ったコンポーネント間のデータのやり取り
vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解
【Techpit】Vue.js/Vuexを使ってTrello風アプリを作成しよう！
特にTechpitの教材はがっつりVuexを使うので個人的におすすめです。