当对象更改时，观察 pinia 中的状态对象不会触发
P粉002546490
2023-08-28 12:14:33
<p>我的 pinia 状态中有一个深层物体，我想在其中放置一个观察者。</p>
<pre class="brush:js;toolbar:false;">export const useProductStore = defineStore("product", {
state: () => ({
attributes: {},
}),
});
</pre>
<p>当对象内部有数据时，它看起来像这样：</p>
<pre class="brush:json;toolbar:false;">attributes: {
english: {
0: {
key: "key1",
value: "value1"
},
1: {
key: "key2",
value: "value2"
},
...
}
}
</pre>
<p>我试图在这个对象上放置一个观察器，但是当值发生变化时，观察器不会触发。这是我尝试在其中执行此操作的组件：</p>
<pre class="brush:js;toolbar:false;"><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>
</pre>
<p>这直接来自 pinia 文档，但是当我更改状态时，什么也没有发生。使用 vue 开发工具，我可以看到状态对象正在更改，所以我知道它是反应性的。我错过了什么？</p>
storeToRefs生成ref()代码>s.您说这个示例“直接来自 pinia 文档”，但我怀疑您是否发现在 pinia 文档中的任何地方传播
ref。如果您这样做了，那么这是一个错误，应该通过在pinia的存储库上提出问题来向 posva 指出。可以直接观看参考：
watch( attributes, handler, { deep: true } )...或者您可以使用箭头函数查看其
.value1：watch( () => attributes.value, handler, { deep: true } )注意
newVal和oldVal参数是 代理 2。要访问其目标，请使用 toRaw。工作演示。 p>
1 - 它允许更窄的观察者，例如：
2 - 如果将对象放入
ref()“该对象是与reactive()" 进行深度反应（参见 详细信息）。另请阅读反应式代理与原始代理 .