Vue.js勉強記録その27 Vue3を更にパワーアップしよう 5-3 ver2

Vue.js3超入門

こちらの書籍で勉強中です。

今回も、前回に引き続きVuexについてです。

mutationを呼び出す際に、オブジェクトで引数を渡す方法。
actionについて。
vuex-persistedstateについてです。

■Vuexによる状態管理

・mutationの引数にオブジェクトを渡す

mutationを呼び出す際に、

$store.commit({type:'mutation名',aaa:'値a',bbb:'値b',,,,,,})

こんな感じに呼び出すと、mutationにオブジェクトの形で引数を渡すことが出来る。
typeに、mutationの名前を入れて、それ以外がオブジェクトとしてtypeで指定したmutation側に渡る。

store.js

import { createStore } from 'vuex'
export const store = createStore({
   state() {
       return {
           message: 'This is store data.',
           counter: 0
       }
   },
   mutations: {
       count: (state, obj) => {
           state.message = obj.message
           state.counter += obj.add;
       },
       reset: (state) => {
           state.message = "reset!"
           state.counter = 0;
       }
   }
})

countを、オブジェクトが受け取れるように編集する。

HellowWorld

<div
 class="btn btn-secondary w-100"
 @click.exact="$store.commit({ type: 'count', message: 'add 1!', add: 1 })"
 @click.shift="$store.commit({ type: 'count', message: 'add 5!', add: 5 })"
 @click.alt="$store.commit({ type: 'count', message: 'add 10!', add: 10 })"
>

HelloWorld側で、countを呼び出す際にオブジェクトを渡す。

ブラウザで見ると以下の感じ。

何も押さずにクリックすると、
@click.exact="$store.commit({ type: 'count', message: 'add 1!', add: 1 })"が呼び出される。

messageが「add1」、追加される数値は「1」

shiftキーを押しながらだと、
@click.shift="$store.commit({ type: 'count', message: 'add 5!', add: 5 })"
が呼び出され、

messageは「add5!」、追加される数値は「5」

最後にaltキーを押しながらクリックすると、
@click.alt="$store.commit({ type: 'count', message: 'add 10!', add: 10 })"が呼び出され、

messageは「add10!」、追加される数値は「10」となる。

・アクションを利用する

mutationの他に、アクションと呼ばれるものがある。

複数のミューテーションを実行する場合などに使用する。

書き方自体は、mutationとほぼ一緒

store.js

import { createStore } from 'vuex'
export const store = createStore({
   state() {
       return {
           message: 'count number.',
           counter: 0
       }
   },
   mutations: {
       count: (state, n) => {
           state.counter += n;
       },
       say: (state, msg) => {
           state.message = msg
       },
       reset: (state) => {
           state.counter = 0;
           state.message = 'reset!'
       }
   },
   actions: {
       doit: (context) => {
           const n = Math.floor(Math.random() * 10);
           context.commit('count', n);
           context.commit('say', 'add' + n + '!');
       }
   }
})

actionsにdoitというアクションを追加している。
その中のcontext.commit()で、mutationを実行している。

<template>
 <div class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p class="mt-3 h5">{{ $store.state.message }}</p>
   <hr />
   <div class="btn btn-secondary w-100" @click="$store.dispatch('doit')">
     <a
       class="h5 text-white text-decoration-none"
       @click.stop="$store.commit('reset')"
     >
       clicked:{{ $store.state.counter }}
     </a>
   </div>
 </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
 setup(props) {
   const data = reactive({
     title: "Vuex",
   });
   return { data };
 },
};
</script>

<div class="btn btn-secondary w-100" @click="$store.dispatch('doit')">
この記述で、doitアクションを呼び出している。

クリックすると、doitの処理が実行される。

・vuex-persistedstateを使う

ページをリロードすると、それまで使っていたデータは初期値に戻ってしまうが、vuex-persistedstateを使うと、ローカルストレージにデータを保持します。

まずは、vuex-persistedstateをインストールします。

npm install vuex-persistedstate

store.jsにvuex-persistedstateを使う記述をしていきます。

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate"
export const store = createStore({
   state() {
       return {
           message: 'count number.',
           counter: 0
       }
   },
   mutations: {
       doit: (state) => {
           const n = Math.floor(Math.random() * 10)
           state.counter += n;
           state.message = 'add' + n + '.'
       },
       reset: (state) => {
           state.counter = 0;
           state.message = 'reset now'
       }
   },
   plugins: [
       createPersistedState(),
   ],
})

import createPersistedState from "vuex-persistedstate"

この記述で、vuex-persistedstateからcreatePersistedStateを使えるようにします。

plugins: [
   createPersistedState(),
],

 ​pluginsは、プラグインを設定するもので、createPersistedState関数を呼び出します。

これだけでstore.jsの設定は終わりです。

HelloWorld.vue

<template>
 <div class="alert alert-primary">
   <h1>{{ data.title }}</h1>
   <p class="mt-3 h5">{{ $store.state.message }}</p>
   <hr />
   <div class="btn btn-secondary w-100" @click="$store.commit('doit')">
     <a
       class="h5 text-white text-decoration-none"
       @click.stop="$store.commit('reset')"
     >
       clicked:{{ $store.state.counter }}
     </a>
   </div>
 </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
 setup(props) {
   const data = reactive({
     title: "Vuex",
   });
   return { data };
 },
};
</script>

クリックすると0-9のランダムな数値を足していきます。

今度は、ブラウザを読み込み直しても、データが保持されます。

特にこちらが何かしなくても、勝手にstoreのデータをローカルストレージに記録してくれます。

■まとめ

mutationに、オブジェクトを引数に渡せるのは便利で良いと感じました。アクションも、知っておくと応用できそうですね。

今回何よりびっくりだったのは、ローカルストレージに勝手に記録された事です。今まで、ローカルストレージに保存するときは、自分でそれ用の記述を書いていましたが、そんな必要がないのですね。なんて楽ちん。