Nuxt3 を使ったアプリの pinia-plugin-persistedstate アップデートメモ

4か月ほどアップデートをサボった Nuxt3 アプリケーションについて久々にパッケージのアップデートを手動で行おうとして少しだけ躓いた点をまとめました

• Nuxt3 を使っている
• Pinia を使っている
• Pinia でローカルストレージなどを活用した状態の永続化を扱うためのプラグイン（@pinia-plugin-persistedstate/nuxt）を使っている

の全てに合致する方が対象です

• パッケージマネージャは pnpm（バージョンは9.7.1）
• Nuxt のバージョンは 3.12.4（pnpm-lock.yamlより）

作業前後のパッケージ情報

※以下はいずれも package.json に記載されたバージョンの話になります

アップデート前

パッケージ	バージョン
pinia	^2.1.7
@pinia/nuxt	^0.5.2
@pinia-plugin-persistedstate/nuxt	^1.2.1

アップデート後

パッケージ	バージョン
pinia	^2.3.0
@pinia/nuxt	^0.9.0
pinia-plugin-persistedstate	^4.2.0
@pinia-plugin-persistedstate/nuxt	削除

パッケージアップデート手順

1. outdated コマンドより古くなったパッケージを確認

$ pnpm outdated
┌─────────────────────────────────────────────┬──────────┬────────────┐
│ Package                                     │ Current  │ Latest     │
├─────────────────────────────────────────────┼──────────┼────────────┤
│ @pinia-plugin-persistedstate/nuxt (dev)     │ 1.2.1    │ Deprecated │
├─────────────────────────────────────────────┼──────────┼────────────┤
～～～省略～～～
├─────────────────────────────────────────────┼──────────┼────────────┤
│ nuxt (dev)                                  │ 3.12.4   │ 3.14.1592  │
├─────────────────────────────────────────────┼──────────┼────────────┤
│ pinia (dev)                                 │ 2.2.2    │ 2.3.0      │
├─────────────────────────────────────────────┼──────────┼────────────┤
～～～省略～～～
├─────────────────────────────────────────────┼──────────┼────────────┤
│ @nuxt/eslint (dev)                          │ 0.3.13   │ 0.7.4      │
├─────────────────────────────────────────────┼──────────┼────────────┤
│ @pinia/nuxt (dev)                           │ 0.5.3    │ 0.9.0      │
├─────────────────────────────────────────────┼──────────┼────────────┤
│ nuxt-primevue (dev)                         │ 0.3.1    │ 3.0.0      │
├─────────────────────────────────────────────┼──────────┼────────────┤
│ primelocale (dev)                           │ 0.0.1    │ 1.2.2      │
└─────────────────────────────────────────────┴──────────┴────────────┘

• ここで初めて @pinia-plugin-persistedstate/nuxt パッケージが非推奨となっていることを認識しました
• 調べていくとパッケージの作者さんは同じ方のようですがパッケージ名が pinia-plugin-persistedstate に変わり、Nuxt用のモジュールはパッケージ内に含まれるようなったみたいです

詳細

↓ @pinia-plugin-persistedstate/nuxt パッケージについて npmjs のサイト内で調べていたところバージョン 1.2.1 を最後に非推奨となっていることがわかりました

↓ 同サイトで「pinia persist」などのワードで検索し、pinia-plugin-persistedstate パッケージを見つけました。利用者の数も多くこれが現在の Pinia & ローカルストレージなどを活用した状態の永続化 を実現するのに有効そうなパッケージであることがわかりました

• リポジトリのURLに含まれる作者さんが一緒

• npmjs のサイトは package.json の中の repository,author,homepage などのフィールドを読み取って表示していたような気がする
• リポジトリURLに含まれる作者さんが一緒 === 同じ作者さんによって開発されたパッケージ というわけでは無かった気がする点は注意
  • OSS をフォークして scoped なパッケージとして公開するときとか

↓ pinia-plugin-persistedstate パッケージの README.md 内に Nuxt での使い方についても言及がありました

2. 調べた情報を元に Pinia 関係のパッケージを最新化

$ pnpm add -D pinia@latest @pinia/nuxt@latest pinia-plugin-persistedstate@latest
 WARN  11 deprecated subdependencies found: are-we-there-yet@2.0.0, gauge@3.0.2, glob@7.2.3, glob@8.1.0, inflight@1.0.6, npmlog@5.0.1, querystring@0.2.0, querystring@0.2.1, rimraf@2.2.8, rimraf@3.0.2, superagent@7.1.6
Packages: +81 -36
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------
Progress: resolved 1521, reused 1428, downloaded 1, added 41, done

devDependencies:
- @pinia/nuxt 0.5.3
+ @pinia/nuxt 0.9.0
- pinia 2.2.2
+ pinia 2.3.0
+ pinia-plugin-persistedstate 4.2.0

~~~ pinia の件に関係ないワーニングが出た。省略 ~~~

Done in 10.4s


$ pnpm remove @pinia-plugin-persistedstate/nuxt
 WARN  11 deprecated subdependencies found: are-we-there-yet@2.0.0, gauge@3.0.2, glob@7.2.3, glob@8.1.0, inflight@1.0.6, npmlog@5.0.1, querystring@0.2.0, querystring@0.2.1, rimraf@2.2.8, rimraf@3.0.2, superagent@7.1.6
Packages: -1
-
Progress: resolved 1520, reused 1428, downloaded 0, added 0, done

devDependencies:
- @pinia-plugin-persistedstate/nuxt 1.2.1

~~~ pinia の件に関係ないワーニングが出た。省略 ~~~

Done in 8s

3. Nuxtの設定ファイル（nuxt.config.ts）修正

pinia-plugin-persistedstate プラグインの README.md に書いてある通り以下のように修正

nuxt.config.ts(抜粋)

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  ~~~省略~~~

  modules: [
    "@pinia/nuxt",
-    "@pinia-plugin-persistedstate/nuxt",
+    "pinia-plugin-persistedstate/nuxt",
    "@vueuse/nuxt",
    "@vee-validate/nuxt",
    "@nuxtjs/supabase",
    "@nuxt/eslint",
    "nuxt-primevue",
    "~/modules/base",
  ],

  ~~~省略~~~
});

4. ストアファイル内のコード修正

以下、永続化にローカルストレージを利用したケース（option syntax記法）

stores/pinia-localstorage-store.ts

export const usePiniaLocalStorageStore = defineStore("pinia-localstorage", {
  state: () => {
    return {
      count: 0,
    };
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  persist: {
-    storage: persistedState.localStorage,
+    storage: piniaPluginPersistedstate.localStorage(),
  },
});

• persist.storage オプションに渡すパラメータが変わったこと以外に変更なし

---

以下、永続化にセッションストレージを利用したケース（setup syntax記法）

stores/pinia-sessionstorage-store.ts

export const usePiniaSessionStorageStore = defineStore("pinia-sessionstorage", () => {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return {
    count,
    increment,
    decrement,
  };
}, {
  persist: {
-    storage: persistedState.sessionStorage,
+    storage: piniaPluginPersistedstate.sessionStorage(),
  },
});

• こちらも同様

---

ちなみに永続化に Cookie を使用するケース（persist: true）はアップデート前と同じ記述のままで問題なく動作することを確認できました

stores/pinia-cookie-store.ts（option syntax記法）

export const usePiniaCookieStore = defineStore("pinia-cookie", {
  state: () => {
    return {
      count: 0,
    };
  },
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  persist: true,
});

↓ ローカルストレージ/セッションストレージなどと同様に以下のようにも書ける

export const usePiniaCookieStore = defineStore("pinia-cookie", {

~~~ 省略 ~~~

  persist: {
    storage: piniaPluginPersistedstate.cookies(),
  },
});

5. 動作確認

↓ ローカルストレージ

↓ セッションストレージ

↓ Cookie

参考サイト