Nuxt3中pinia持久化处理！

执行上下文

发布于 2025-11-20 19:01:47

430

文章被收录于专栏：执行上下文执行上下文

在使用nuxt3开发SSR渲染的项目的时候，如何将pinia持久化到本地？如何自动引入自定义的仓库store模块，减少手动引入的麻烦？

使用插件 @pinia-plugin-persistedstate/nuxt 来达到持久化的目的。

npm i @pinia-plugin-persistedstate/nuxt 前提也需要安装 nuxt pinia模块@pinia/nuxt 。

安装完成后在nuxt.config.js中进行以下配置。

1、在modules中配置刚刚安装的两个模块依赖。

首先设置piniaPersistedstate，cookieOptions是设置过期时间，storage用来指定使用localStorage还是sessionStorage。需要注意⚠️，在服务端渲染的时候没有此关键字。所以需要添加判断只能在客户端的时候持久化。

2、pinia 中设置storesDirs，就能直接在页面使用相关store的配置，而无需手动引入。

export default defineNuxtConfig({
  ssr: true,
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
  ],
  pinia: {
    storesDirs: ['./store/**']
  },
  piniaPersistedstate: {
    cookieOptions: {
      maxAge: 2 * 365 * 24 * 60 * 60 * 1000
    },
    storage: typeof window !== 'undefined' ? 'localStorage' : 'cookies',
    debug: import.meta.env.DEV
  },
})

另外有的解决方法中，让在plugins 新建如下插件配置，经过测试后其实是没有用的。

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp) => {
 nuxtApp.$pinia.use(piniaPluginPersistedstate)
})

然后在自定义pinia的模块中添加 persist:true选项来进行持久化配置。

import { defineStore } from "pinia";
const useBaseData= defineStore("abc", {
    state: () => ({
        data: null as string | null,
    }),
    actions: {
        async updateData(newVer: string) {

        },
    },
    persist: true,
});
export default useBaseData;

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-06-24，如有侵权请联系 cloudcommunity@tencent.com 删除

测试