Dado que Vue.js afirma que es un marco progresivo, tendemos a actualizar nuestras compras en línea a un SPA respaldado por Vue.js en pequeños pasos.

Por ejemplo, usamos Vue.js para representar el mini carrito en la parte superior de la página. Y para dinamizar el formulario de pedido. Y para hacer dinámica la página de detalles del producto, etc.

Esto significa que definimos muchas aplicaciones pequeñas de vue en la misma página.

Sin embargo, aún deben compartir el mismo contexto. Porque cuando el usuario hace clic en el botón de buy en la página de detalles del producto, el contexto compartido debe actualizarse, de modo que el minicarrito en la parte superior de la página refleje la cantidad total de productos en el carrito.

Para este propósito, creamos una variable global, y en nuestras miniaplicaciones Vue.js la usamos como nuestros datos:

 var cart = { orderLines: [], itemsCount: 0} // this is our global cart object // this loads before any Vue code

Luego, en la aplicación mini-cart tenemos:

 var miniCart = { data() { return { cart: cart // this is where we reuse the global cart object, to create a shared context } }, computed: { itemsCount() { var _this = this; var itemsCount = 0; for (var i = 0; i < _this.cart.orderLines.length; i++) { itemsCount += _this.cart.orderLines[i].quantity || 0; } return itemsCount; } }, methods: { } }; Vue.createApp(miniCart).mount('#miniCart');

Y luego, en nuestro botón Agregar al carrito , en realidad aumentamos cart.orderLines[i].quantity .

Sin embargo, el minicarro no se actualiza.

¿Qué está mal?

Estamos usando Vue.js 3.