Comment ignorer les propriétés profondément imbriquées dans l'API de composition de Vue pour une conversion réactive ?

Question

Dans vue-composition-api : En utilisant la méthode reactive(), je souhaite conserver une partie de l'objet comme référence.

---

J'ai quelques produits, appartenant à des catégories personnalisées :

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

et la liste de commande référençant les produits dans l'objet profond :

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

J'ai découvert grâce à example.orders[0].product == chair -> falseinspection qu'il s'agissait d'objets différents. J'ai aussi découvert que example.orders[0].product n'est pas de type Produit.

Comme je peux avoir de nombreuses commandes différentes et que les produits contiennent beaucoup de données, je souhaite example.orders[].product garder une référence au produit original.

Je n’ai pas besoin de réactivité dans les produits eux-mêmes car ils sont constants. (Il s'agit d'une application Electron, le contenu restera inchangé tant que le programme sera exécuté)

Je veux juste réagir à la commande.

Answer 1

Utilisez 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)
  }))
});

REMARQUE : Veuillez lire les avertissements sur l'étiquette.