Nuxt.jsの基礎勉強-vuexの使い方について-

Nuxt.js Vue.js

はじめに

今回はvuexを用いたデータの扱いについて学習したので纏めておく。

vuexとは

vue.jsを用いたアプリケーションで扱うデータの状態管理を行うツールのことです。

vuexを用いたデータを呼び出し

~/store/index.jsというファイルを作成し、vuexをimportして扱えるようにする。その後以下のように記述することで扱うことができる。

import Vuex from 'vuex'

const createStore = () => {
    return new Vuex.Store({
        state: function(){
            return{
                message: 'Hello Vuex'
            }
        }
    })
}

export default createStore

上記で定義したデータを呼び出すにはコンポーネントにて$storeを呼び出すことで出力することができる。

<template>
    <section class="container">
        <div>
            <p>{{ $store.state.message }}</p>
        </div>
    </section>
</template>

ミューテーションを用いたデータ操作

vuexを用いたデータの状態管理ではview側から直接的なデータ操作を行わずにミューテーションを介したデータ操作をする必要がある。

その理由として、データ管理を行う上でview側からの予期しない操作の防止やデータのバグが何処からきているのかを明確にし、アプリケーションのメンテナンス性向上に貢献することがあげられます。

基本的なmutation構文

基本的な記述の仕方は~/store/index.js内にmutationsを作ってその中に処理を記述します。

    return new Vuex.Store({
        state: function(){
              (略)
        },
        mutations: {
            updateMessage: function(state){
                state.message = 'Update Message'
            }
        }
    })

呼び出しは$store.commit('呼び出すミューテーション')

<p v-on:click="$store.commit('updateMessage')">
  {{ $store.state.message }}
</p>

mutationの値渡し

~/store/index.js側では第二引数を設定することで外部から値を受け取ることができる。

        mutations: {
            payloadMessage: function(state, payload){
                state.message = payload
            }
        }

コンポーネント側では第二引数として渡したい値を記述します。

<p v-on:click="$store.commit('payloadMessage', 'this is payload')">
  {{ $store.state.message }}
</p>

actionを介したmutationの扱い方

~/store/index.js側でactionを定義し、action側からミューテーションを呼び出すように記述します。

        mutations: {
            payloadMessage: function(state, payload){
                state.message = payload
            }
        },
        actions: {
            payloadMessageAction(context, payload){
                context.commit('payloadMessage', payload)
            }
        }

コンポーネント側ではdispatch関数を用いて、第一引数を呼び出すアクション名にし、第二引数を渡したい値とすることで記述できます。

<p v-on:click="$store.dispatch('payloadMessageAction', 'this is dispatch')">
  {{ $store.state.message }}
</p>

モジュールモードでの開発について

今までの記述の仕方はクラシックモードといって~/store/index.js内に一括管理する方法です。しかし、大規模アプリを作成する場合だと一括管理した場合、storeの記述が肥大化し管理が難しくなる可能性があります。

そこで、複数のファイルでstoreの管理を行うモジュールモードの記述をここでは記述していきます。

今までのコードをモジュールモードへ

モジュールモードで管理する場合は~/store/index.jsを作成せずにその他の名前でファイルを作成することで出来ます。

今回は~/store/hello.jsという風にファイルを作成し、以下のように各状態を関数型で定義していくことで、クラシックモードからモジュールモードに書き換えが完了します。

export const state = () => ({
    message: 'Hello Vuex'
})

export const mutations = {
    updateMessage: function(state){
        state.message = 'Update Message'
    },
    payloadMessage: function(state, payload){
        state.message = payload
    }    
}

export const actions = {
    payloadMessageAction(context, payload){
        context.commit('payloadMessage', payload)
    }
}

呼び出すときは、storeのモジュール名をコンポーネント内に表記することで出力することができます。

<p v-on:click="$store.commit('hello/updateMessage')">
    {{ $store.state.hello.message }}
</p>
<p v-on:click="$store.commit('hello/payloadMessage', 'this is payload')">
    {{ $store.state.hello.message }}
</p>
<p v-on:click="$store.dispatch('hello/payloadMessageAction', 'this is dispatch')">
    {{ $store.state.hello.message }}
</p>

終わりに

今回は実際にvuexを触ることで、vuexを用いた状態管理の大まかな概要を学ぶことができた。