Nuxt.js 入門 (4) - Vuexによる状態管理

Vuexによる状態管理の手順をまとめました。

・Nuxt.js 2.15.8

前回

1. Vuex

「Vuex」は、アプリケーション全体の状態を管理する「ストア」と呼ばれる保管場所を提供します。

ストア

2. ストアの利用

「ストア」の利用手順は、次のとおりです。

(1) storeフォルダに「index.js」を生成して、以下のように編集。

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        message: "Hello Vuex!",
      }
    }
  })
}
export default createStore

◎ ストアの定義
Vuex.Store()でストアを生成しています。Vue.jsのdataと同様にstateで格納する変数を定義します。

(2) 「pages/index.vue」を以下のように編集。

<!-- テンプレート -->
<template>
  <div>
    <div>{{$store.state.message}}</div>
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
}
</script>

<!-- スタイル -->
<style>
</style>

◎ ストアへのアクセス
以下の書式でストアにアクセスします。

$store.state.変数名

実行結果は、次のとおりです。

3. ストアの更新

ストアの更新の例は、次のとおりです。

・store/index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        count: 0,
      }
    },
    mutations: {
      countup: function(state) {
          state.count++
      },
    }
  })
}
export default createStore

・pages/index.vue

<!-- テンプレート -->
<template>
  <div>
    <div>カウント: {{$store.state.count}}</div>
    <button v-on:click="onClick">カウントアップ</button>
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  methods: {
    onClick: function() {
      this.$store.commit("countup")
    }
  }
}
</script>

<!-- スタイル -->
<style>
</style>

◎ ミューテーション
ストアのデータ更新には、ミューテーションを使います。

ミューテーション | Vuex

実行結果は、次のとおりです。