如何使 Pinia 商店热重载更改？

import { defineStore, acceptHMRUpdate } from 'pinia';
import { v4 as uuidv4 } from 'uuid';

export const useStoreNotes = defineStore('storeNotes', {
  state: () => ({
    notes: [
      {
        id: '8d3ce756-ef35-4e68-80bd-fb97e03a831b',
        content: 'Learn React',
      },
      {
        id: '11860d36-cb57-455e-9b9c-083ef5762f7e',
        content: 'Learn Java',
      },
    ],
  }),
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useStoreNotes, import.meta.hot));
}

嘿，我正在尝试使用 Pinia (Vuex5) 中的 HMR（热模块替换）。我也在用维特。我尝试使用 Pinia 官方文档中的 HOT 重载：https://pinia.vuejs.org/cookbook/hot-module-replacement.html https://pinia.vuejs.org/cookbook/hot-module-replacement.html

但热重载不起作用。如果我更新商店中的某些内容，我必须刷新页面，并且我想在不刷新页面的情况下查看更改。

看来您的语法正确。我的猜测是，像我一样，您希望在更改状态值时页面会更新；然而，HMR 似乎实际上正在按预期工作。看看这个问题的答案issue https://github.com/vuejs/pinia/issues/843:

是的，这个想法是添加新状态不应该重置状态的其他值，因此现有的状态值始终被保留。这也意味着您可以更改值、注释该行并保存（这将删除状态属性），然后取消注释并再次保存。

通过拉出终端并注意到我对商店的更新已记录，我能够认识到 HMR 确实正在工作。 参见示例我的终端 https://i.stack.imgur.com/hmvPQ.png.

同样，如果您向存储添加新状态，那么您应该在 Vue DevTools 中看到存储相应更新。这两种方法是我能够确定 HMR 是否按预期工作的方式（不幸的是，这不是我希望的那样）。

最后，正如上述GitHub问题的回复中提到的，您确实可以注释掉状态代码，保存，取消注释，然后再次保存以强制出现新值。我认为这并不理想，但我认为这是一个可行的解决方法。