关于Nuxt框架中的数据持久化问题

在Nuxt框架中,我们可以同时编写客户端与服务端代码,但在状态管理器或某些自由封装的方法中,我们希望将数据存储在浏览器的Storage中,以维持数据的持久性。

例如Vue3官方推荐使用的Pinia状态管理器,我们安装 pinia-plugin-persistedstate 插件后,在定义的Store中定义好persist配置即可开启持久化。但对Nuxt框架而言,它无法识别localStorage/sessionStorage,以至于会报错,原因也很简单,在服务端nodejs全局对象为global,而客户端浏览器全局对象为window,只有window对象才拥有localStorage/sessionStorage这两个对象。

js 复制代码
import { defineStore } from 'pinia'

export const useToken = defineStore('someName', {
  // 数据
  state: () => {
    return {
      msg: '',
    }
  },
  // 计算
  getters: {},
  // 方法
  actions: {},
  // 持久化
  persist: {
    enabled: true,
    storage: sessionStorage, // 不支持跨标签页共享数据 -- throw '找不到该属性'
    // storage: localStorage // 支持跨标签页共享数据 -- throw '找不到该属性'
  },
})

因此我们可以判断代码执行环境来使用数据持久化,通过import.meta.server在服务端时返回true,通过三元表达式如果在服务端便返回undefined(实际上根本不可能在服务端使用这些方法),至此就成功开启了Pinia的持久化操作。

js 复制代码
import { defineStore } from 'pinia'

export const useToken = defineStore('someName', {
  // 数据
  state: () => {
    return {
      msg: '',
    }
  },
  // 计算
  getters: {},
  // 方法
  actions: {},
  // 持久化
  persist: {
    enabled: true,
    storage: import.meta.server ? undefined : sessionStorage, // 不支持跨标签页共享数据
    // storage: import.meta.server ? undefined : localStorage // 支持跨标签页共享数据
  },
})

此外,如果你想在Nuxt框架中操作原生localStorage/sessionStorage的存储,也可以使用判断环境来保证代码正常运行。正因为Nuxt框架是全栈框架,所以判断代码执行环境至关重要!

相关推荐
北鸟南游5 天前
用现有bootstrap的模板,改造成nuxt3项目
前端·bootstrap·nuxt.js
郭少8 天前
🔥 放弃 vw!我在官网大屏适配中踩了天坑,用 postcss-px-to-viewport-8-plugin 实现了 Rem 终极方案
vue.js·性能优化·nuxt.js
文艺理科生12 天前
Nuxt.js入门指南-Vue生态下的高效渲染技术
前端·vue.js·nuxt.js
草梅友仁12 天前
草梅 Auth 1.4.0 发布与 ESLint v9 更新 | 2025 年第 33 周草梅周报
vue.js·github·nuxt.js
russo_zhang18 天前
【Nuxt】一行代码实现网站流量的实施监控与统计
vue.js·nuxt.js
前端加油站21 天前
Nuxt.js 项目性能优化
nuxt.js
Neon120422 天前
Nuxt.js 国际化配置完整教程(含版本兼容与问题解决)
前端·nuxt.js
白雾茫茫丶1 个月前
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
vue.js·nuxt.js
小刀飘逸1 个月前
vue2项目SEO:基于nuxt2的ssr
vue.js·nuxt.js·seo
BLACK5951 个月前
Nuxt3中PC端与移动端适配的三种方式(含Nuxt官网同款实现方式)
前端·vue.js·nuxt.js