我有一个深对象在我的pinia状态,我想把一个观察者。
export const useProductStore = defineStore("product", {
state: () => ({
attributes: {},
}),
});
当对象内部有数据时,它可以看起来像这样:
attributes: {
english: {
0: {
key: "key1",
value: "value1"
},
1: {
key: "key2",
value: "value2"
},
...
}
}
我试图在这个对象上放置一个监视器,但是当值更改时,监视器不会触发。下面是我尝试在其中执行此操作的组件:
<script setup>
import { useProductStore } from "@/stores/ProductStore";
import { storeToRefs } from "pinia";
const productStore = useProductStore();
const { attributes } = storeToRefs(productStore);
watch(() => ({...attributes}), (newValue, oldValue) => {
console.log(oldValue);
console.log(newValue);
}, { deep: true });
</script>
这直接来自pinia文档,但是当我改变状态时,什么也没有发生。使用vue dev工具,我可以看到状态对象被改变,所以我知道它是被动的。我错过了什么?
1条答案
按热度按时间vddsk6oq1#
storeToRefs
产生ref()
s。你说这个例子 “直接来自pinia文档”,但我怀疑你是否在pinia文档中找到了传播
ref
的地方,如果你找到了,那就是一个错误,应该通过在pinia
的repo上打开一个问题来向posva指出。可以直接观看裁判:
...或者您可以使用箭头功能查看其
.value
1:注意
newVal
和oldVal
参数是Proxies2。要访问它们的目标,请使用toRaw。Working demo .
1-它允许更窄的观察者,例如:
2-如果您将对象放置在
ref()
* 中,则该对象将与reactive()
进行深度React(请参阅详细信息)。另请阅读React式代理与原始代理。