クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

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

Vuexの続きです。前回はVuexストアのステートに保管したデータを読み込みました。今回はミューテーション(mutations)に設定した処理を読み込んで実行してみます。それでは行きましょう!

【目次】

※参考:【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する - クモのようにコツコツと

※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

下層ページでもストアの値を表示させる

前回はTopページ上でVuexのストアに保管したデータを呼び出して表示したが、データはどこからでも呼び出せるはずなので確かめてみる。

今回も書籍「Vue.js & Nuxt.js超入門」を参考に進める。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

  • 作者:掌田津耶乃
  • 出版社/メーカー: 秀和システム
  • 発売日: 2019/02/05
  • メディア: 単行本

まずは下層ページを作る。今回はカウンターアプリを作ってみたいので、Nuxt.jsの「pages」フォルダの中に「counter.vue」という名前のファイルを作る。

「counter.vue」は以前作った下層ページ「jaaku.vue」をベースにする。

※参考:【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来 - クモのようにコツコツと

このように書き換えた。

<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>
  • aタグの中に@click@click.shiftを設定。
  • @click値は$store.commitで引数がcount
  • @click.shift値は$store.commitで引数がreset

v-onの省略形。v-onの詳細はこちらを参照。

※参考:【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた! - クモのようにコツコツと

@clickはクリックの処理。@click.shiftはシフトボタンを押しながらクリックの処理。

ミューテーションは$store.commitcommitで呼び出すようだ。

さあどうだ! f:id:idr_zz:20191220190933p:plain やた!イイねアイコンをクリックするとカウンターの数字が増えた!

f:id:idr_zz:20191220183934p:plain シフトを押しながらアイコンをクリックすると0に戻った!

なお、ミューテーションとよく似た機能で「アクション(actions)」というのもある。非同期処理を設定することができる。

※参考:アクション | Vuex

最後に

ということで、Vuexのミューテーションに設定した処理を実行することができました。データを読むだけでなく処理を実行できるとまた出来ることが広がりそうです。次回はローカルストレージに値を保存するvuex-persistedstateに触れてみようと思います。それではまた!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com