vue.js 如何使Pinia商店热重新加载更改？

xe55xuns 于 2023-06-30 发布在 Vue.js

关注(0)|答案(2)|浏览(230)

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
但是热装填不起作用。如果我更新了商店中的某些内容，我必须刷新页面，并且我希望在不刷新页面的情况下看到更改。

vue.js

来源：https://stackoverflow.com/questions/72883410/how-can-i-make-the-pinia-store-to-hot-reload-the-changes

2条答案

按热度按时间

dgenwo3n1#

看起来你有正确的语法。我的猜测是，和我一样，您希望在更改状态值时更新页面;然而，似乎HMR实际上按预期工作。看看这个issue的答案：
是的，这个想法是添加新的状态不应该重置状态的其他值，因此现有的状态值总是保留的。这也意味着你可以改变一个值，注解该行并保存（这会删除state属性），然后取消注解并再次保存。
我能够认识到，HMR确实是工作的拉起终端注意到我的更新到商店被记录。例如my terminal。
类似地，如果您向store添加新的状态，那么您应该在Vue DevTools中看到store相应地更新。这两种方式是我如何能够确定HMR是按预期工作的（尽管不幸的是不是我所希望的）。
最后，正如在对上述GitHub问题的回复中提到的，您确实可以注解掉状态代码，保存，取消注解，然后再次保存以强制显示新值。在我看来并不理想，但我认为这是一个可行的变通办法。

赞(0）回复(0）举报 2023-06-30

ndh0cuux2#

我也遇到了同样的问题，后来才知道我用错了商店。这就是在组件中必须使用它的方式。

<template>
<pre>{{ notesStore.length }}</pre>
</template>

<script setup>
import { useStoreNotes } from "../stores/useStoreNotes";

const notesStore = useStoreNotes();
</script>

赞(0）回复(0）举报 2023-06-30

我来回答

vue.js 如何使Pinia商店热重新加载更改？

2条答案

相关问题

热门标签

最新问答