我使用Vue3 + Pinia作为商店。
我的Pinia文件是：
export const useCounterStore = defineStore ({
id: 'statusData',
state: () => ({
test1: 25,
test2: 75
})
})和模板我用途：
<template>
<div>
{{ store.test1 }} {{ store.test2 }}
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/statusData';
const store = useCounterStore();
const { test1, test2 } = storeToRefs(store);
</script>如果我手动更改“statusData.js”文件中的值，模板中的值不会更改。重新加载浏览器后。
请问错误在哪里？
1条答案
按热度按时间xwbd5t1u1#
撇开HMR不谈，重要的是要记住商店和模板都在服务器端。当你访问一个Vue页面时，Vue会“神奇地”用你商店中的值生成HTML内容。
为什么，比如说模板更改，在没有刷新的情况下是可见的，这要归功于HMR。没有HMR（* 我认为 * 有一种方法可以禁用。不确定）你会遇到同样的问题。
要点是：HMR是为模板而不是Pinia启用的。因此，您的Pinia更改仅在刷新时可见。当然，除非你也为Pinia启用HMR。