Bagaimana untuk melangkau sifat bersarang dalam dalam API Komposisi Vue untuk penukaran reaktif?

Question

Dalam vue-composition-api: Menggunakan kaedah reactive(), saya ingin menyimpan sebahagian daripada objek sebagai rujukan.

---

Saya mempunyai beberapa produk, tergolong dalam kategori tersuai:

const chair = new Product(...); // lots of information in each product 
const table = new Product(...); // lots of information in each product

dan senarai pesanan yang merujuk produk dalam objek dalam:

let example = reactive({   
  orders: [
    { product: chair, quantity: 2 }, 
    { product: table, quantity: 1 }, 
    { product: chair, quantity: 6 }, 
    { product: table, quantity: 2 },
  ] 
});

Saya dapati melalui example.orders[0].product == chair -> false pemeriksaan bahawa ini adalah objek yang berbeza. Saya juga mendapati bahawa example.orders[0].product bukan jenis Produk.

Memandangkan saya boleh mempunyai banyak pesanan yang berbeza, dan produk mengandungi banyak data, saya ingin example.orders[].product menyimpan rujukan kepada produk asal.

Saya tidak memerlukan kereaktifan dalam produk itu sendiri kerana ia tetap. (Ini adalah aplikasi Elektron, kandungan akan kekal tidak berubah selagi program berjalan)

Saya hanya mahu bertindak balas terhadap pesanan.

Answer 1

Gunakan markRaw:

import { markRaw, reactive } from 'vue';

const example = reactive({   
  orders: [
    { product: chair, quantity: 2 }, 
    { product: table, quantity: 1 }, 
    { product: chair, quantity: 6 }, 
    { product: table, quantity: 2 },
  ].map(el => ({ 
    ...el,
    product: markRaw(el.product)
  }))
});

NOTA: Sila baca amaran pada label.