田無rb#1

勉強の記録をブログに残していこうかなという気持ちになったので（続くかは分かりません！）筆を執ってみました@田無のカフェ

テンションがアゲアゲになるので勉強会っぽいタイトルにしてみましたが、ただ一人でモクモクしているだけです

以前やっていた「Vue.js&Nuxt.js超入門」という本の写経の続きをやっていきます（rbとはなんだったのか）

Chapter5「Nuxt.jsにアップグレード！」の中途半端ところで止まっていたのでその続きから

久しぶりすぎてアプリの起動方法を忘れている。本を遡って以下のコマンドで実行できることを確認

$ npm run dev

それでは読み進めていきやしょう

Section5-3 Vuexによる状態管理

の途中の

アクションを利用する

ミューテーションを実行するためのアクションを利用するとのこと

ミューテーションってなんだっけ…本を遡って確認

stateを直接書き換えるのは推奨されていないからミューテーションという機能を使ってネ

とのこと

このミューテーションを実行するのがアクション アクションの第一引数にはcontextというオブジェクトが渡され、contextのcommitメソッドを使ってミューテーションを実行するらしい

mutations: {
  foo: function(state) {
    ...
  },
  bar: function(state) {
    ...
  }
},
actions: {
  baz: function(context) {
    context.commit('foo');
    context.commit('bar');
  }
}

テンプレートから以下のように呼び出すことができる

<div @click="$store.dispatch('baz')"></div>

複数のミューテーションを一つのアクションから呼び出すように定義できて便利！ということなのかな

値をずっと保持するには？

stateの値はリロードすると消えるからそれをローカルストレージに保持してみましょうという話 vuexに標準でその仕組みはないらしいのでプラグインをインストール

$ npm install vuex-persistedate

vuex-persistedstateとモードについて

ローカルストレージに保存する仕組みのため、サーバサイドレンダリングを使う場合は利用できない Vuexのモードを変更する必要があるとのこと デフォルトではサーバサイドとクライアントサイドどちらのレンダリングにも対応しているがそれをspaモードに書き換え

nuxt.config.js のmodeを指定している行を以下のように書き換え

mode: 'spa',

Vuexでvuex-persistedstateを利用する

store/index.js にて vuex-persistedstate を読み込む設定を追加する 下記コードの importの部分とpluginの部分だけ追記すれば良さそう 手元では他にも一部書き換えている（アクションの部分をミューテーションに書き換えている）けど直接的な影響は無さそう 一部抜粋

import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate"
    
const createStore = () => {
  return new Vuex.Store({
    ...
    plugins: [
      createPersistedState(),
    ],
  })
}

export default createStore

テンプレート側も修正（アクションを呼び出していたのをミューテーションを呼び出す形にする）

<div class="link" @click="$store.commit('doit')">

リロードしても値が保持されたままになっている〜 🎉

今日はここまで