Pinia Store更新后DOM组件不热重载，需手动重启或刷新

修改Pinia Store中的数据后，Vite无法自动触发热重载更新页面内容，必须重启开发服务器或手动刷新浏览器才能看到变更效果。控制台无任何错误提示，两个月前的旧项目可正常实现Pinia热重载，已尝试多种方案均未解决问题。

相关代码 #

ExpenseStore.js #

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useExpenseStore = defineStore('expense', () => {
  const id = ref(1)
  const transactions = ref([
    { id: id.value++, description: 'Salary', amount: 1000 },
    { id: id.value++, description: 'Rent', amount: -200 },
    { id: id.value++, description: 'Car Payment', amount: -300 }
  ])

  return {
    id,
    transactions
  }
})

main.js #

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.use(createPinia())
app.mount('#app')

组件代码 #

<template>
  <div v-for="transaction in expenseStore.transactions" :key="transaction.id">
    {{ transaction.id }} : {{ transaction.description }} : ${{ transaction.amount }}
  </div>
</template>

<script setup>
import { useExpenseStore } from '@/stores/ExpenseStore'

const expenseStore = useExpenseStore()
</script>

已尝试的无效解决方案 #

• 使用storeToRefs获取transactions

  <script setup>
  import {useExpenseStore} from '@/stores/ExpenseStore'
  import { storeToRefs } from 'pinia'
  
  const expenseStore = useExpenseStore()
  const { transactions } = storeToRefs(expenseStore)
  </script>
  

• 使用computed计算属性获取transactions

  <script setup>
  import {useExpenseStore} from '@/stores/ExpenseStore'
  import { computed } from 'vue'
  
  const expenseStore = useExpenseStore()
  const transactions = computed(() => expenseStore.transactions)
  </script>
  

• 在Store中配置acceptHMRUpdate

  import { defineStore, acceptHMRUpdate } from 'pinia'
  
  export const useExpenseStore = defineStore('expense',() => {
    // 原有代码...
  })
  
  if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useExpenseStore, import.meta.hot))
  }
  

• 重新创建项目、切换开发环境（VSCode → Google IDX）、安装旧项目相同版本的Vue、Vite和Pinia

可能的解决办法 #

1. 确保Pinia HMR配置完整且正确 #

组合式Store的HMR配置需要确保acceptHMRUpdate正确绑定Store实例，并且代码放在Store导出之后。完整的Store代码应该如下：

import { defineStore, acceptHMRUpdate } from 'pinia'
import { ref } from 'vue'

export const useExpenseStore = defineStore('expense', () => {
  const id = ref(1)
  const transactions = ref([
    { id: id.value++, description: 'Salary', amount: 1000 },
    { id: id.value++, description: 'Rent', amount: -200 },
    { id: id.value++, description: 'Car Payment', amount: -300 }
  ])

  return {
    id,
    transactions
  }
})

// 确保HMR配置在Store导出后
if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useExpenseStore, import.meta.hot))
}

2. 检查Vite配置是否禁用HMR #

打开vite.config.js，确认没有禁用HMR：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: true // 默认值为true，若被设置为false需改回
  }
})

3. 清除缓存 #

• 在Vite终端按r键强制刷新开发服务器缓存
• 清除浏览器缓存（快捷键Ctrl+Shift+R或Cmd+Shift+R）

4. 验证Store导入路径 #

确保组件中导入Store的路径与实际文件位置一致，避免因路径别名或拼写错误导致HMR无法追踪文件变更。

5. 确认版本兼容性 #

再次核对Vue、Pinia、Vite的版本是否匹配：

• Vue 3.x 必须搭配 Pinia 2.x
• Vite 4.x+ 推荐搭配 Vue 3.2.37+ 和 Pinia 2.0.21+

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