【Nuxt.js】Vuex Storeの使い方

一度勉強したのですが、忘れてしまったので復習のついででnoteにまとめます。

Vuex Storeについて

Vuex StoreをNuxt.js導入環境で利用したいときは、

const store = new Vuex.Store( ~~~~~~~

のような記載は必要ない。

storeフォルダにjsファイルを置くだけで、Vuex Storeが自動で導入される。

ストアとは？

データの保存場所です。

複数ページで利用する値や、ステータスを管理する上で利用します。

ステータスを管理とは、ログイン状態などのことを指しています。

ストアを利用するには、以下の4つを用意します。

ステート state

ミューテーション mutations

アクション actions

ゲッター getter

ステート

データの保管場所そのものです。

変数に宣言してstateを保持します。

[サンプルコード]

export const state = ()=>({
   started: null,
   message: 'hello'
});

ミューテーション

ステートの値を唯一変更可能なのがミューテーションです。

要は、「セッター」です。

それぞれのページ（コンポーネント）からステートの値を変えるのはNGで、こちらのミューテーションを経由して値を変えることになります。

[サンプルコード(store -> index.js)]

export const mutations = {
   clear(state) {
       state.started = null
       state.message = null
   },
   started(state, started) {
       state.started = started;
   },
   updateMessage(state){
       state.message = 'こんにちは'
   }
};

[サンプルコード (pages -> index.vue)]

commitメソッドで呼び出す点を覚えておこう。

 <button v-on:click="$store.commit('updateMessage')">Update</button>

アクション

最低限、ステートとミューテーションがあれば実装可能です。

こちらのアクションは基本的に、API通信を伴う場合に利用します。

アクションでミューテーションを利用して、値を変更します。

[サンプルコード(store -> index.js)]

   updateMessageAction(context){
       context.commit('updateMessage', 'Commit by action')
   } 

[サンプルコード (pages -> index.vue)]

dispathメソッドで呼び出すことを覚えておこう。

<button v-on:click="$store.dispatch('updateMessageAction')">Action</button>

ゲッター

stateの値を加工して取り出したいときにこちらを利用します。

加工する必要が無い場合は、getterを経由せず直接stateの値を取りにいって大丈夫です。

export const getters = {
    getMessage(state){
        return state.message + '田中さん'
    }
}

「こんにちは、田中さん」

と返却するためのgetterを用意してみました。

まとめ

mutationとactionの使い分けがイマイチ理解できていないが、使ううちに理解すれば良いかなという感覚です。