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