javascript - How to add item to local storage Vue 3 with Composition API - Stack Overflow

admin管理员组

文章数量:1023251

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!

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!

• javascript
• vue.js
• local-storage
• vuejs3

Share Improve this question Follow asked Dec 7, 2021 at 11:20 AdrianAdrian 39944 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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'));
}

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

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!

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!

• javascript
• vue.js
• local-storage
• vuejs3

Share Improve this question Follow asked Dec 7, 2021 at 11:20 AdrianAdrian 39944 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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'));
}

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

本文标签： javascriptHow to add item to local storage Vue 3 with Composition APIStack Overflow