【Vue.js】Vuexのミューテーション（mutations）に設定した処理を実行する

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt_appへようこそ！
      </h1>
      <h2 class="subtitle">
        かうんたぁあぷりぺぇじ
      </h2>
    <p>{{$store.state.message}}、はじめました。</p>

      <p><router-link to="/">Topページに戻る</router-link></p>

      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

ページの違いがわかりやすいように見出しを「かうんたぁあぷりぺぇじ」に変えている
{{$store.state.message}}の部分は共通。ここでストアのデータを読み込まれて表示する。

Nuxtプロジェクトを起動する

ターミナルのcdコマンドでNuxt.jsのフォルダに移動する（私がつけたフォルダ名は「nuxt_app」）

cd /（フォルダ）/nuxt_app

プロジェクトの起動

npm run dev

Nuxtプロジェクトの起動についてはこちらを参照。

※参考：【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる - クモのようにコツコツと

下層ページ「counter」にアクセスしてみる。

http://localhost:3000/counter

おお、下層ページでけた！ f:id:idr_zz:20191220155513p:plain Vuexのデータ「びゅえっくすてすと、はじめました。」もちゃんと読み込まれている！

では、このページで他のデータも表示して行こう。

ステート（state）にデータを追加する

「store」フォルダの「index.js」を改造。

ステート（state）にデータを追加してみる。

import Vuex from 'vuex'

const vuexTest = () => {
    return new Vuex.Store({
        state: function() {
            return {
                message: 'このアプリを気に入った人の数↓',
                icon: '👍',
                counter: 0,
            };
        },
    });
}

export default vuexTest

messageを「このアプリを気に入った人の数↓」にうちかえ
iconを追加。値は「👍」
counterを追加。値は「0」

「counter.vue」にステートを配置する。

    <p class="message">{{$store.state.message}}</p>
    <p class="btn"><a>{{$store.state.icon}}</a> {{$store.state.counter}}</p>

$store.state.messageを. messageに配置
$store.state.iconと$store.state.counterを. btnに配置

さあどうだ！ f:id:idr_zz:20191220183934p:plain やた！表示された。

ミューテーション（mutations）に処理を書く

この時点ではまだ「いいね」アイコンを押してもカウンターは動かない。

カウンターを動かす処理はミューテーション（muttations）に書く。

※参考：ミューテーション | Vuex

「index.js」を下記のように改造する。

const vuexTest = () => {
    return new Vuex.Store({
        state: function() {
            return {
                message: 'このアプリを気に入った人の数↓',
                icon: '👍',
                counter: 0,
            };
        },
        mutations: {
            count: function(state) {
                state.counter++;
            },
            reset: function(state) {
                state.counter = 0;
            }
        }
    });
}

stateキーの下にmutationsキーを追加
mutationsキーの値は連組配列
連想配列の一つ目はcountキーで値は無名関数。引数はstate。処理はカウントアップ
連想配列の二つ目はresetキーで値は無名関数。引数はstate。処理は0へのリセット

「counter.vue」にミューテーションを配置する。

    <p class="btn">
      <a
       @click="$store.commit('count')"
       @click.shift="$store.commit('reset')"
      >{{$store.state.icon}}</a>
       {{$store.state.counter}}
    </p>