How to add item to local storage Vue 3 with Composition API

Question

I'm trying to add cart item to localStorage in Vue 3. I'm using Composition API and and I'm just learning Vue, so please be understanding :D

Okey, so it's my code of single product view where I call to addProductToCart function

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
        }
    }
}

Problem is when I reload page. State of cart items it's stored but when I add another product after refreshing page the localStorage it's reset.

Problem it's here:

let cartItems = ref([])

Im trying to check if the localStorage is not null and when is not null I want add another products to exsisting state of cart product items so trying like this:

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

But when I click ADD TO CART button I receive error:

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

I searched the internet for a lot of information about the state of carts but I found nothing sensible where they represent storage of cart states using the Composition API.

Maybe some of you know some cool material that will show you how to properly create a shopping cart using the Composition API.

Thanks!

stasdes · Accepted Answer · 2021-12-07 11:41:54Z

4

you need to set the ref value and also to parse the local storage value

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

answered Dec 7, 2021 at 11:41

stasdes

6894 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrian Over a year ago

Now I have error: TypeError: cartItems.value.push is not a function

Adrian Over a year ago

Okey when I use JSON.parse the if condition all it's work! Thanks! :D

Pavan J · Accepted Answer · 2021-12-07 11:42:47Z

1

I believe you should use cartItems.value in your code:

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

answered Dec 7, 2021 at 11:42

Pavan J

3531 gold badge3 silver badges13 bronze badges

2 Comments

Adrian Over a year ago

Now I have error: TypeError: cartItems.value.push is not a function

Adrian Over a year ago

Okey when I use JSON.parse the if condition and cartItems.value all it's work! Thanks! :D

Collectives™ on Stack Overflow

How to add item to local storage Vue 3 with Composition API

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related