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

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

- [Nuxt3](https://nuxt.com/) を使っている
- [Pinia](https://pinia.vuejs.org/) を使っている
- Pinia でローカルストレージなどを活用した状態の永続化を扱うためのプラグイン（[@pinia-plugin-persistedstate/nuxt](https://www.npmjs.com/package/@pinia-plugin-persistedstate/nuxt)）を使っている

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

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

## 作業前後のパッケージ情報
`※以下はいずれも package.json に記載されたバージョンの話になります`

### アップデート前

|パッケージ|バージョン|
|---|---|
|[pinia](https://www.npmjs.com/package/pinia)|^2.1.7|
|[@pinia/nuxt](https://www.npmjs.com/package/@pinia/nuxt)|^0.5.2|
|[@pinia-plugin-persistedstate/nuxt](https://www.npmjs.com/package/@pinia-plugin-persistedstate/nuxt)|^1.2.1|

### アップデート後

|パッケージ|バージョン|
|---|---|
|[pinia](https://www.npmjs.com/package/pinia)|^2.3.0|
|[@pinia/nuxt](https://www.npmjs.com/package/@pinia/nuxt)|^0.9.0|
|[pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)|^4.2.0|
|[@pinia-plugin-persistedstate/nuxt](https://www.npmjs.com/package/@pinia-plugin-persistedstate/nuxt)|削除|

## パッケージアップデート手順
### 1. outdated コマンドより古くなったパッケージを確認
```bash
$ 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` パッケージが非推奨となっていることを認識しました:open_mouth:
- 調べていくとパッケージの作者さんは同じ方のようですがパッケージ名が `pinia-plugin-persistedstate` に変わり、Nuxt用のモジュールはパッケージ内に含まれるようなったみたいです

<details>
<summary>詳細</summary>

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384986/a59189b2-a426-257b-4acb-57e35bc7d4da.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384986/c7f02bb1-cdde-0de0-c544-82f7f2942c2c.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384986/c397192f-ff38-e969-75bd-c157391d1642.png)

</details>

### 2. 調べた情報を元に Pinia 関係のパッケージを最新化
```bash
$ 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 に書いてある通り以下のように修正

```diff_typescript: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記法）
```diff_typescript: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記法）
```diff_typescript: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`）はアップデート前と同じ記述のままで問題なく動作することを確認できました
```typescript: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,
});
```

↓ ローカルストレージ/セッションストレージなどと同様に以下のようにも書ける
```typescript
export const usePiniaCookieStore = defineStore("pinia-cookie", {

~~~ 省略 ~~~

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

### 5. 動作確認
↓ ローカルストレージ

![localstorage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384986/4b80e8a3-b8ce-ae6d-1c9b-9b0ab151a55c.gif)

↓ セッションストレージ

![sessionstorage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384986/d04afe27-90c3-1744-002e-a0fa28fb61ef.gif)

↓ Cookie

![cookie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2384986/3b3e9594-76a6-340e-7cb0-84727d6fa897.gif)

## 参考サイト
https://prazdevs.github.io/pinia-plugin-persistedstate/