我使用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。