vue.js 当对象更改时,pinia中的监视状态对象不激发

zysjyyx4  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(334)

我有一个深对象在我的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工具,我可以看到状态对象被改变,所以我知道它是被动的。我错过了什么?

vddsk6oq

vddsk6oq1#

storeToRefs产生ref()s。
你说这个例子 “直接来自pinia文档”,但我怀疑你是否在pinia文档中找到了传播ref的地方,如果你找到了,那就是一个错误,应该通过在pinia的repo上打开一个问题来向posva指出。
可以直接观看裁判:

watch(
  attributes,
  handler, 
  { deep: true }
)

...或者您可以使用箭头功能查看其.value1

watch(
  () => attributes.value,
  handler,
  { deep: true }
)

注意newValoldVal参数是Proxies2。要访问它们的目标,请使用toRaw。
Working demo .

1-它允许更窄的观察者,例如:

watch(
  () => attributes.value[0]?.value),
  handler
)

2-如果您将对象放置在ref() * 中,则该对象将与reactive()进行深度React(请参阅详细信息)。另请阅读React式代理与原始代理。

相关问题