Nuxt3+Pinia中Client对象原型丢失问题求助

1. 解决Pinia中实例原型丢失的问题 #

将Client实例直接赋值给Pinia state时，Vue的响应式系统会把它包装成Proxy对象，容易导致原型链丢失。提供两种处理方式：

方法A：标记实例为非响应式（适用于实例无需响应式更新的场景） #

如果Client实例的属性不需要跟随响应式变化，用markRaw跳过响应式包装，保留原始原型：

// clientStore.ts
import { markRaw } from 'vue'

actions: {
  updateClient(clt: ClientType){
      this.client = markRaw(clt)
   }
}

方法B：存储实例数据，按需重建实例（适用于需要响应式的场景） #

如果需要实例属性保持响应式，不要直接存储实例，而是存储实例的属性数据，获取时重新创建Client实例：

// clientStore.ts
state: () => {
  clientData: {} as Record<string, any> // 存储实例的属性数据
},

actions: {
  updateClient(clt: ClientType){
      this.clientData = { ...clt } // 提取实例属性
   },
  getClient(): ClientType {
      return Object.assign(new Client(), this.clientData) // 重建实例
   }
}

2. 解决localStorage存储后原型丢失的问题 #

JSON序列化仅保留对象的可枚举属性，无法存储原型和方法。因此需要存储实例的属性数据，取出时重建实例：

存储时 #

// 仅序列化实例的属性数据
localStorage.setItem("client", JSON.stringify(newClient))

取出时 #

通过Object.assign或构造函数将数据恢复为带原型的Client实例：

// 方式1：使用Object.assign
const clientData = JSON.parse(localStorage.getItem("client")!) 
const client1 = Object.assign(new Client(), clientData)

// 方式2：如果Client构造函数支持传入初始化数据
const client1 = new Client(clientData)

// 方式3：若createClient有静态恢复方法（更推荐）
const client1 = createClient.from(clientData)

3. 适配Pinia持久化插件（若使用） #

如果使用pinia-plugin-persistedstate实现持久化，需要自定义序列化/反序列化逻辑，确保恢复时重建Client实例：

// clientStore.ts
export const useClientStore = defineStore('client', {
  state: () => ({
    client: {} as ClientType
  }),
  actions: {
    updateClient(clt: ClientType){
      this.client = clt
    }
  },
  persist: {
    storage: localStorage,
    serializer: {
      // 序列化时仅保存实例属性数据
      serialize: (state) => JSON.stringify(state.client),
      // 反序列化时重建实例
      deserialize: (value) => {
        const data = JSON.parse(value)
        return { client: Object.assign(new Client(), data) }
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者Banus