如何阻止Vite热重载清除Vue3中的变量状态？

问题原因 #

Vite的热重载机制会重新加载修改后的模块文件，你在my-file.ts里导出的items是模块级的ref变量，每次模块重新执行都会创建新的空数组实例，之前通过loadItems加载的数据自然会丢失。

解决方案 #

1. 使用全局状态管理库（推荐）

将状态迁移到Pinia或Vuex这类全局状态管理工具中，它们的状态实例不会随模块热重载而重置，能稳定保留数据。

以Pinia为例，创建一个store：

// stores/itemStore.ts
import { defineStore } from 'pinia'
import axios from 'axios'

export const useItemStore = defineStore('items', {
  state: () => ({
    list: [] as string[]
  }),
  actions: {
    async loadItems() {
      this.list = await axios.get(...)
    }
  }
})

在组件或入口文件中使用：

import { useItemStore } from '@/stores/itemStore'
const itemStore = useItemStore()
// 应用启动时调用
itemStore.loadItems()

2. 利用Vite热更新API手动保存状态

如果不想引入状态管理库，可以通过Vite提供的import.meta.hotAPI在热重载时保存和恢复数据：

// my-file.ts
import { ref } from 'vue'
import axios from 'axios'

export const items = ref<string[]>([])
export async function loadItems() {
  items.value = await axios.get(...)
}

// 热重载时处理状态
if (import.meta.hot) {
  // 卸载模块前保存当前数据
  import.meta.hot.dispose(data => {
    data.items = items.value
  })
  // 接受更新后恢复数据
  import.meta.hot.accept((newModule) => {
    if (newModule?.items) {
      newModule.items.value = import.meta.hot.data?.items || []
    }
  })
}

3. 持久化到浏览器本地存储

把数据存在localStorage或sessionStorage中，初始化时从存储中读取，热重载后数据会自动恢复：

// my-file.ts
import { ref } from 'vue'
import axios from 'axios'

const STORAGE_KEY = 'app_items'
// 初始化时从localStorage读取数据
export const items = ref<string[]>(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))

export async function loadItems() {
  const res = await axios.get(...)
  items.value = res.data
  // 加载成功后保存到localStorage
  localStorage.setItem(STORAGE_KEY, JSON.stringify(items.value))
}

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