Vue中获取大数据并通过Pinia存储时，如何避免页面刷新内存持续增长？

核心问题分析 #

你遇到的内存持续增长，本质是每次页面刷新（或重新加载）时都重复下载、解析并存储了完整的700MB级CSV数据，旧数据未被及时回收。结合你的代码，可从以下几个前端层面优化：

解决方案1：避免重复加载数据 #

发起请求前先检查Pinia中是否已有数据，避免每次页面挂载都重复请求解析：

修改数据处理代码：

const store = useCovidDataStore()

// 数据不存在时才发起请求
if (!store.getData.value) {
  Papa.parse("https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv", {
    download: true,
    header: true,
    complete: function(results) {
      const groupedByLocation = results.data.reduce((acc, obj) => {
        if (!acc[obj.location]) {
          acc[obj.location] = [];
        }
        acc[obj.location].push(obj);
        return acc;
      }, {});
      store.setData(groupedByLocation)
    }
  })
}

同时优化Pinia的setData方法，先清空旧数据再赋值，帮助垃圾回收：

function setData(veri) {
    // 先清空旧数据，触发浏览器垃圾回收
    data.value = null
    data.value = veri
}

解决方案2：裁剪不必要的数据 #

OWID的CSV包含大量冗余字段，只保留业务需要的字段，能大幅降低内存占用：

修改数据处理的reduce逻辑：

// 示例：只保留核心业务字段
const groupedByLocation = results.data.reduce((acc, obj) => {
  // 按需裁剪字段，只保留需要的内容
  const trimmedObj = {
    location: obj.location,
    date: obj.date,
    total_cases: obj.total_cases,
    new_cases: obj.new_cases
    // 可根据需求添加其他字段
  }
  if (!acc[trimmedObj.location]) {
    acc[trimmedObj.location] = [];
  }
  acc[trimmedObj.location].push(trimmedObj);
  return acc;
}, {});

解决方案3：使用本地缓存减少重复下载 #

将处理后的数据存入sessionStorage，下次加载优先读取缓存，避免重复解析大文件：

修改数据处理代码：

const store = useCovidDataStore()
const CACHE_KEY = 'covid_data_cache'

// 优先读取本地缓存
const cachedData = sessionStorage.getItem(CACHE_KEY)
if (cachedData) {
  store.setData(JSON.parse(cachedData))
} else if (!store.getData.value) {
  Papa.parse("https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/owid-covid-data.csv", {
    download: true,
    header: true,
    complete: function(results) {
      const groupedByLocation = results.data.reduce((acc, obj) => {
        const trimmedObj = {
          location: obj.location,
          date: obj.date,
          total_cases: obj.total_cases,
          new_cases: obj.new_cases
        }
        if (!acc[trimmedObj.location]) {
          acc[trimmedObj.location] = [];
        }
        acc[trimmedObj.location].push(trimmedObj);
        return acc;
      }, {});
      store.setData(groupedByLocation)
      // 存入缓存，若数据量超出sessionStorage限制，可改用IndexedDB
      sessionStorage.setItem(CACHE_KEY, JSON.stringify(groupedByLocation))
    }
  })
}

额外优化：SPA路由切换时清理状态 #

如果是SPA应用中路由切换导致的重复加载，可在组件卸载时清理Pinia状态：

// 在使用数据的组件中
import { onUnmounted } from 'vue'
import { useCovidDataStore } from '@/stores/covidData'

const store = useCovidDataStore()

onUnmounted(() => {
  // 组件卸载时清空数据，释放内存
  store.setData(null)
})

内容的提问来源于stack exchange，提问作者Yunus Emre Arslan