Estoy tratando de agregar un elemento del carrito a localStorage en Vue 3. Estoy usando la API de composición y solo estoy aprendiendo Vue, así que comprenda: D

Okey, entonces es mi código de vista de producto único donde llamo a la función addProductToCart

 export default { props: { id: { required: true, type: String } }, setup(props) { const { product, getProduct } = useProducts() onMounted(getProduct(props.id)) let cartItems = ref([]) function addProductToCart(product) { cartItems.value.push({...product}) window.localStorage.setItem('CART', JSON.stringify(cartItems.value)) console.log(JSON.parse(localStorage.getItem('CART'))); } return { addProductToCart, product } } }

El problema es cuando recargo la página. El estado de los artículos del carrito está almacenado, pero cuando agrego otro producto después de actualizar la página, el almacenamiento local se reinicia.

Problema está aquí:

 let cartItems = ref([])

Estoy tratando de verificar si localStorage no es nulo y cuando no es nulo, quiero agregar otros productos a los artículos existentes del estado del carrito, así que intento así:

 let cartItems = ref([]) if (window.localStorage.getItem('CART') !== null) { cartItems = window.localStorage.getItem('CART') }

Pero cuando hago clic en el botón AGREGAR AL CARRITO recibo un error:

 Uncaught TypeError: Cannot read properties of undefined (reading 'push')

Busqué en Internet mucha información sobre el estado de los carritos, pero no encontré nada sensato donde representen el almacenamiento de los estados del carrito usando la API de Composición.

Tal vez algunos de ustedes conozcan algún material interesante que les muestre cómo crear correctamente un carrito de compras usando la API de Composición.

¡Gracias!