如何让 Pinia 商店热加载更改？答案

【问题标题】：How can I make the Pinia store to hot reload the changes?如何让 Pinia 商店热加载更改？
【发布时间】：2022-08-17 05:09:12
【问题描述】：

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（热模块更换）。我也在用Vite。我尝试使用 Pinia 官方文档中的 HOT 重载：https://pinia.vuejs.org/cookbook/hot-module-replacement.html

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

标签： vue.js vuejs3 store pinia vuex4

【解决方案1】：

看起来你有正确的语法。我的猜测是，和我一样，您希望页面在更改状态值时更新；然而，看起来 HMR 实际上正在按预期工作。请参阅此issue 的答案：

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

通过拉起终端注意到我对商店的更新已记录，我能够识别出 HMR 确实在工作。请参阅my terminal 的示例。

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

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

【讨论】：