如何在 Vuejs 3 中设置响应式对象

Question

我在全局空间中有一个反应对象：

let cart = Vue.reactive({
    order: {
       itemsCount: 0
    },
    items: []
});

效果很好。当我们以任何方式更改此购物车时（例如cart.order.itemsCount += 1;）更改此购物车时，其他 UI 部分都会自动更新。

但是如果我们将它设置为一个新对象（假设我们order从服务器收到了一个新对象），那么它就会崩溃并且不再工作：

cart = serverCart

我们甚至尝试过cart = Vue.reactive(serverCart)，它仍然不会导致其他 UI 部分重新渲染。

我们可以手动设置每个属性：

cart.order.itemsCount = serverCart.order.ItemsCount;
cart.items[0].productTitle = serverCart.order[0].productTitle;
...

但这当然是愚蠢的。

我们如何在 Vue.js 3 中完全重新设置响应式对象？

更新：

您可以看到此代码和框的运行情况。

Answer 1

要在 vue3 中设置新值反应对象，您需要使用Object.assign函数，并且不应该重新分配它

这是一个例子：

<template>
  {{ reactiveTest }}
  <button @click="change">Change</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let reactiveTest = reactive({
      a: 1,
      b: 2,
    });
    function change() {
      const serverReactive = {
        a: 3,
        b: 4,
      };
      // reactiveTest = serverReactive;  Do not do this
      Object.assign(reactiveTest, serverReactive)
    }
    return {
      reactiveTest,
      change,
    };
  },
};
</script>