【Nuxt3】PiniaがlocalStorageに永続化されない原因がしょうもなかった

COLUMN コラム

タイトルにもある通り、PiniaでStoreの内容をlocalStorageに永続化させようと思って実装してみたが、なぜか永続化されなくて困っていました。

というか、面倒だったので後回しにしてました。

今回必要に迫られて、VueとかNuxtとかPiniaとか@pinia/nuxtとかのバージョンを疑ったりvue.config.tsの内容を疑ったり色々したんですが、結果まじでしょうもないけどなかなか気付けない原因だったので共有です。

バージョンは原因とは関係ありませんでしたが、Piniaはバージョンごとに書き方が頻繁に変更されているので一応。

import { defineStore } from ‘pinia’export const xxxStore = defineStore(
‘xxxStore’,
() => {
const dic = ref<{ jwt: string }>({
jwt: ”
})

const setJwt = (jwt: string) => {
dic.value.jwt = jwt
}

const getJwt = () => {
return dic.value.jwt
}

return {
dic,
setJwt,
getJwt
}
},
{
persist: {
storage: piniaPluginPersistedstate.localStorage()
}
})

原因は上記ソースでいう”dic”をreturnしていなかったからです。

defineStoreの第2引数で実際の値を返却しないと、Pinia側が「どの値を永続化すればええん？」ってなるんだと思います。

永続化対象を明示的に指定している訳ではないですし。

結論：値もちゃんとreturnしよう