Vue 3 + Pinia + TypeScript页面刷新后数组被覆盖问题求助

核心方案：在Pinia Store初始化时读取localStorage数据 #

直接在定义Store的state时，优先从localStorage获取初始值，而非默认空数组，这是最直接且无延迟的恢复方式。

TypeScript代码示例 #

假设你的文件数据类型为FileItem，Store定义如下：

import { defineStore } from 'pinia'

// 定义文件数据类型
interface FileItem {
  id: string
  name: string
  // 补充你的其他字段，比如size、type等
}

export const useFileStore = defineStore('file', {
  state: () => {
    // 从localStorage读取数据，处理异常避免报错
    const savedFiles = localStorage.getItem('files')
    let initialFiles: FileItem[] = []
    
    if (savedFiles) {
      try {
        initialFiles = JSON.parse(savedFiles) as FileItem[]
        // 可选：校验数据有效性，过滤不符合结构的脏数据
        initialFiles = initialFiles.filter(item => item.id && item.name)
      } catch (err) {
        console.error('解析本地文件数据失败', err)
      }
    }

    return {
      files: initialFiles
    }
  },
  actions: {
    // 示例：添加文件时同步更新localStorage
    addFile(file: FileItem) {
      this.files.push(file)
      localStorage.setItem('files', JSON.stringify(this.files))
    },
    // 批量更新文件时同步存储
    updateFiles(newFiles: FileItem[]) {
      this.files = newFiles
      localStorage.setItem('files', JSON.stringify(this.files))
    }
  }
})

为什么原生方案可能失效？ #

如果之前尝试在组件中手动赋值恢复，可能因为组件挂载时机晚于Store初始化，导致页面初始渲染时仍显示空数组。而在Store初始化阶段直接读取localStorage，能保证Store从一开始就持有正确数据。

备选：组件挂载时手动恢复（不推荐） #

如果无法修改Store初始化逻辑，可在根组件（如App.vue）的onMounted钩子中手动更新Store：

import { useFileStore } from '@/stores/file'
import { onMounted } from 'vue'

const fileStore = useFileStore()

onMounted(() => {
  const savedFiles = localStorage.getItem('files')
  if (savedFiles) {
    try {
      const files = JSON.parse(savedFiles) as FileItem[]
      // 用$patch更新Store状态，或直接赋值fileStore.files = files
      fileStore.$patch({ files })
    } catch (err) {
      console.error('恢复文件数据失败', err)
    }
  }
})

内容的提问来源于stack exchange，提问作者Rafał Zapotoczny