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));
}
嘿,我正在尝试使用HMR(热模块更换)在Pinia(Vuex5)。我也用Vite。我试着使用Pinia官方文档中的HOT重新加载:https://pinia.vuejs.org/cookbook/hot-module-replacement.html
但是热装填不起作用。如果我更新了商店中的某些内容,我必须刷新页面,并且我希望在不刷新页面的情况下看到更改。
2条答案
按热度按时间dgenwo3n1#
看起来你有正确的语法。我的猜测是,和我一样,您希望在更改状态值时更新页面;然而,似乎HMR实际上按预期工作。看看这个issue的答案:
是的,这个想法是添加新的状态不应该重置状态的其他值,因此现有的状态值总是保留的。这也意味着你可以改变一个值,注解该行并保存(这会删除state属性),然后取消注解并再次保存。
我能够认识到,HMR确实是工作的拉起终端注意到我的更新到商店被记录。例如my terminal。
类似地,如果您向store添加新的状态,那么您应该在Vue DevTools中看到store相应地更新。这两种方式是我如何能够确定HMR是按预期工作的(尽管不幸的是不是我所希望的)。
最后,正如在对上述GitHub问题的回复中提到的,您确实可以注解掉状态代码,保存,取消注解,然后再次保存以强制显示新值。在我看来并不理想,但我认为这是一个可行的变通办法。
ndh0cuux2#
我也遇到了同样的问题,后来才知道我用错了商店。这就是在组件中必须使用它的方式。