Estoy siguiendo un tutorial para crear un sitio web de comercio electrónico usando Vue Router y Vuex. Cuando hago this.cart = this.$store.state.cart en diferentes componentes, las variables del carrito parecen tener la misma referencia de objeto ya que el recuento total de artículos en cada componente se actualiza cada vez que se cambia en el otro componente aunque no haya mutación se ha comprometido (consulte el video vinculado / con marca de tiempo para ver una demostración). ¿Es este el caso aquí? Sé que los objetos se pasan por referencia en JS, pero las tiendas Vuex no se pueden cambiar directamente sin cometer una mutación, lo que haría que pareciera que el objeto se duplica en segundo plano cada vez que se accede a la tienda.

Los dos componentes relevantes son una barra de navegación que muestra cuántos artículos hay en el carrito y un componente Cart.vue más detallado, los cuales usan Vuex para acceder al estado del carrito asignando this.cart = this.$store.state.cart en el gancho de ciclo de vida montado. La barra de navegación en App.vue se ve así (se omiten los detalles):

 <template> <div> ... Cart link in navbar <span>Cart ({{ cartTotalLength }})</span> ... </div> </template> <script> export default { data() { return { cart: { items: [] } } }, mounted() { this.cart = this.$store.state.cart }, computed: { cartTotalLength() { return this.cart.items.reduce((acc, curVal) => { return acc += curVal.quantity }, 0) } } } </script>

El componente Cart.vue es similar (también establece una variable de instancia para el carrito en el enlace del ciclo de vida montado), aunque muestra una vista más detallada del contenido del carrito y tiene botones para cambiar la cantidad de artículos por producto (no se muestra a continuación):

 <template> ... Cart Summary {{ cartTotalLength }} items ... </template> <script> export default { name: 'Cart', data() { return { cart: { items: [] } } }, mounted() { this.cart = this.$store.state.cart }, computed: { cartTotalLength() { return this.cart.items.reduce((acc, curVal) => { return acc += curVal.quantity }, 0) } }, methods: { incrementQuantity(item) { cart.item.quantity += 1 } ... } } </script>

¿Por qué se actualiza el recuento de elementos en la barra de navegación cuando el recuento de elementos se actualiza en Cart.vue a través del método incrementQuantity cuando no se confirma ninguna mutación? ¿Hace referencia this.$store.state.cart al mismo objeto cada vez que se usa, aunque en componentes separados?