如何在Pinia中持久化存储Set类型数据？

问题核心是JSON序列化不支持Set类型，pinia-plugin-persistedstate-2默认用JSON处理状态，会把Set转成空对象{}，从本地存储恢复后就不再是Set实例，导致调用has()等方法报错。

下面是两种可行的解决方法：

方法1：自定义序列化/反序列化函数（推荐） #

在Store的persist配置里，自定义序列化和反序列化逻辑，将Set转成数组存储，恢复时再转回Set：

type Hi = { h: Set<string> }

const useHi = defineStore("hi", {
  state: (): Hi => ({ h: new Set<string>() }),
  persist: {
    serializer: {
      // 序列化：把Set转成数组再转JSON
      serialize: (state) => JSON.stringify({
        ...state,
        h: Array.from(state.h)
      }),
      // 反序列化：把数组转回Set
      deserialize: (str) => {
        const parsedState = JSON.parse(str)
        return {
          ...parsedState,
          h: new Set(parsedState.h)
        }
      }
    }
  }
})

这样处理后，本地存储里存的是数组，恢复到Pinia状态时自动转为Set实例，调用hi.h.has("21")就正常了。

方法2：使用beforeRestore钩子 #

在Store的actions里定义beforeRestore钩子，在状态从本地存储恢复前，手动将存储的数组转为Set：

type Hi = { h: Set<string> }

const useHi = defineStore("hi", {
  state: (): Hi => ({ h: new Set<string>() }),
  persist: true, // 开启持久化
  actions: {
    beforeRestore() {
      // 从本地存储读取保存的状态
      const savedState = localStorage.getItem("hi")
      if (savedState) {
        const parsed = JSON.parse(savedState)
        // 将数组转回Set
        this.h = new Set(parsed.h)
      }
    }
  }
})

这种方式适合需要在恢复前做额外逻辑的场景，不过自定义序列化的方式更简洁统一。

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