Nuxt 3插件中使用Pinia时状态持久化失效问题求助

问题原因 #

在Nuxt3插件中直接实例化并提供Pinia Store时，会在服务端渲染阶段创建Store实例——此时服务端没有localStorage，Pinia持久化逻辑无法正常工作；同时提前实例化Store会干扰Pinia Persisted State的初始化时机，导致客户端挂载后无法正确恢复持久化状态。

解决方案 #

方案一：移除插件提供，直接在组件中使用Store #

删除插件文件plugin/store.ts，在需要使用Store的组件中直接调用useTestStore：

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.addCount">Add</button>
  </div>
</template>

<script setup>
const store = useTestStore()
</script>

方案二：提供Store获取函数而非实例 #

修改plugin/store.ts，提供一个获取Store的函数，让Store在组件初始化时才被实例化：

export default defineNuxtPlugin(({ $pinia }) => {
  return {
    provide: {
      getTestStore: () => useTestStore($pinia),
    },
  };
});

在组件中使用：

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.addCount">Add</button>
  </div>
</template>

<script setup>
const { $getTestStore } = useNuxtApp()
const store = $getTestStore()
</script>

方案三：客户端专属实例化（不推荐） #

如果必须在插件中实例化Store，限制仅在客户端执行，并手动触发状态恢复：

export default defineNuxtPlugin(({ $pinia }) => {
  let testStore = null
  if (process.client) {
    testStore = useTestStore($pinia)
    testStore.$hydrate()
  }
  return {
    provide: {
      store: testStore,
    },
  };
});

组件中使用时需判断Store是否存在：

<template>
  <div v-if="$store">
    <p>Count: {{ $store.count }}</p>
    <button @click="$store.addCount">Add</button>
  </div>
</template>

内容的提问来源于stack exchange，提问作者ahmadafiquddin