坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › Nuxt3中piana持久化处理!

Nuxt3中piana持久化处理!

坚果大叔
2025-06-22 18:45:45技术阅读 470

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

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

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

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

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

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

2、piana 中设置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)
})

然后在自定义piana的模块中添加 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;
赞赏 赞(1)
生活中的突发事件
上一篇
吐血收集的1000+九号电动车提示音,免费领取!
下一篇
在小程序中查看
再想想
暂无评论
搜你想看的
聚合文章
将博客搬至CSDN
网站折腾记
iphone 利用 Scriptable 添加网上国网电费小组件
Windows微信多开+防撤回!
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
960 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
7,465 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
3,769 3
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,529 4
1
  • 1
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
323
文章
134
评论
375
喜欢