Блог

Я пытаюсь добавить товар корзины в localStorage в Vue 3. Я использую API композиции и только изучаю Vue, поэтому, пожалуйста, будьте понятливы 😀

Хорошо, так что это мой код представления одного продукта, в котором я вызываю функцию 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  }  } }  

Проблема в том, когда я перезагружаю страницу. Состояние товаров в корзине сохраняется, но когда я добавляю другой товар после обновления страницы локального хранилища, он сбрасывается.

Проблема в том, что она здесь:

 let cartItems = ref([])  

Я пытаюсь проверить, не является ли локальное хранилище пустым, и когда оно не равно нулю, я хочу добавить другие товары в существующее состояние товаров в корзине, поэтому пытаюсь сделать вот так:

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

Но когда я нажимаю кнопку ДОБАВИТЬ В КОРЗИНУ, я получаю сообщение об ошибке:

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

Я искал в Интернете много информации о состоянии тележек, но не нашел ничего разумного в том, где они представляют собой хранилище состояний тележки с использованием API композиции.

Возможно, кто-то из вас знает какой-нибудь классный материал, который покажет вам, как правильно создать корзину покупок с помощью API композиции.

Спасибо!

вам нужно установить значение ref, а также проанализировать значение локального хранилища

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

Я считаю, что вы должны использовать cartItems.value в своем коде:

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