Tengo un objeto reactivo en el espacio global:
let cart = Vue.reactive({ order: { itemsCount: 0 }, items: [] }); Funciona muy bien. Cuando cambiamos este carrito de alguna manera (por ejemplo cart.order.itemsCount += 1; ), otras partes de la interfaz de usuario se actualizan automáticamente.
Pero si lo configuramos en un nuevo objeto (digamos que recibimos un nuevo objeto de order del servidor), entonces se rompe y ya no funcionará:
cart = serverCart Incluso probamos cart = Vue.reactive(serverCart) y todavía no hace que otras partes de la interfaz de usuario se vuelvan a procesar.
Es posible que configuremos cada propiedad manualmente:
cart.order.itemsCount = serverCart.order.ItemsCount; cart.items[0].productTitle = serverCart.order[0].productTitle; ...Pero esto es una idiotez, por supuesto.
¿Cómo podemos restablecer un objeto reactivo por completo en Vue.js 3?
Actualizar :
Puedes ver este CodesandBox en acción.
Para establecer nuevos valores de objetos reactivos en vue3, debe usar la función Object.assign y no debe reasignarlo
Aquí hay un ejemplo:
<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>Está intentando copiar por referencia, intente copiar por valor con el operador de propagación ... :
const { reactive } = Vue const app = Vue.createApp({ el: "#demo", setup() { let cart = reactive({ order: { itemsCount: 0 }, items: [] }); const someCart = {order: {itemsCount: 3}, items: [{id: 1, name: "aaa"}, {id: 2, name: "bbb"}, {id: 3, name: "444"}]} cart = reactive({...someCart}) return {cart } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <p> {{ cart }}</p> <label>change items count</label> <input type="number" v-model="cart.order.itemsCount" /> </div>