关于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框架是全栈框架,所以判断代码执行环境至关重要!

相关推荐
白雾茫茫丶3 天前
Nuxt4.0初体验:一个简约、精美、现代化的个人站点导航!
vue.js·nuxt.js
小刀飘逸12 天前
vue2项目SEO:基于nuxt2的ssr
vue.js·nuxt.js·seo
BLACK59513 天前
Nuxt3中PC端与移动端适配的三种方式(含Nuxt官网同款实现方式)
前端·vue.js·nuxt.js
枣把儿16 天前
交互效果太单调?推荐两个动画丝滑的组件库,Vue 和 Nuxt都适用!
前端·vue.js·nuxt.js
MiyueFE16 天前
Nuxt 4.0 深度解析:从架构革新到实战迁移 🚀
前端·nuxt.js
枣把儿24 天前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
mwq301231 个月前
GitHub Action自动化部署Nuxt项目
nuxt.js
浩男孩1 个月前
【🍀新鲜出炉 】十个 “如何”从零搭建 Nuxt3 项目
前端·vue.js·nuxt.js
clue2 个月前
解决pnpm创建Nuxt项目时的better-sqlite3绑定错误
nuxt.js
Midsummer2 个月前
nuxt安装报错-网络问题
vue.js·nuxt.js