时间戳

首页 > 解决方案 > 在组件安装 vuejs 之前，LocalStorage 不会设置数据

vue.js - 在组件安装 vuejs 之前，LocalStorage 不会设置数据

问题描述

我正在创建一个购物车，方法是使用from向我的 mainlocalStorage发出一个事件以获取全局存储数据， 然后我从ProductCard.vue获取这些值EventBusProductCard.vueApp.vuelocalStorage

产品.vue

<template>
  <button
    type="button"
    class="product__btn add_to_cart_btn"
  
    @click.prevent="addToCart(product)"
  >
    Add to cart
  </button>
</template>

<script>
import { EventBus } from "../app";

export default {
    name: "ProductCard",

    methods: {
        addToCart(product) {
            this.addCartLoading = true

            setTimeout(() => {
                this.addCartLoading = false

                EventBus.$emit('addToCart', product)
            }, 300)
        },
    }
}
</script>

我在App.vue下面看到了这个事件

应用程序.vue

<script>

export default {
    name: "App",

    data() {
        return {
            shoppingCart: [],
        }
    },

    created() {
       EventBus.$on('addToCart', this.setCartContents)
    },

    methods: {
        setCartContents(product) {
            let productExistOnCart = this.shoppingCart.find(cart => cart.id === product.id)

            if (product !== undefined && product !== null) {
                this.shoppingCart.push({
                   id: product.id,
                   name: product.name,
                   qty: 1,
                   price: product.price,
                   options: {
                      old_price: product.old_price,
                      image: product.image,
                   }
                })

                localStorage.setItem('shoppingCart', JSON.stringify(this.shoppingCart))
            }
        },
    }
}
</script>

然后我来到我的CartItemsWrapper.vue组件，它显示了我添加的所有项目，并通过v-for循环将它们显示在列表中CartItemsWrapper.vue问题在这里，我删除了该项目，但它从我的this.shoppingCart以及从localstorage我重新添加的一些产品中删除如果不刷新页面，localstorage所有已删除的值都会再次出现在我cart的页面中，如果我刷新洞页面然后在购物车中添加一些东西，那么它并没有完全删除，那么好的，我怎样才能在不刷新页面的情况下完全删除项目。？请任何人帮助我。

CartItemsWrapper.vue

<button type="button" class="remove-btn" @click.prevent="removeCart(cart)">
  Remove
</button>

<script>

    export default {
        name: "CartItemsWrapper",

        data() {
            return {
                shoppingCart: [],
            }
        },

        methods: {
           removeCart(cart) {
              let cartItems = JSON.parse(localStorage.getItem('shoppingCart'))

              for (let i = 0; i < cartItems.length; i++) {
                if(cartItems[i].id == cart.id) {
                   cartItems.splice(i, 1);

                   break;
                }
              }

              localStorage.setItem("shoppingCart", JSON.stringify(cartItems))

              this.refreshCart()
           },
       }
   }

这是gif，你可以看到它

标签： vue.jsvuejs2local-storage

解决方案

查看代码后，我发现从购物车中删除商品时，您并没有将其从shoppingCartApp.vue 上的本地状态中删除。因此，当您将任何新项目推送到 时shoppingCart，该项目将与其中的旧值一起添加。

您可以做的是，您可以EventBus.$emit('removed')从您的 EventBus 中触发一个 EventBusCartItemsWrapper.vue并从中删除该项目shoppingCart。

例子

// CartItemsWrapper.vue
removeCart(cart) {
  let cartItems = JSON.parse(localStorage.getItem('shoppingCart'))

   for (let i = 0; i < cartItems.length; i++) {
     if(cartItems[i].id == cart.id) {
        cartItems.splice(i, 1);

        break;
     }
   }

   localStorage.setItem("shoppingCart", JSON.stringify(cartItems))
   // Emitting the event
   EventBus.$emit('removed', cart.id)

   this.refreshCart()
 },

// App.vue
created() {
  EventBus.$on('addToCart', this.setCartContents)
  EventBus.$on('removed', this.removeCartContent)
},
methods: {
 removeCartContent(cardId){
    this.shoppingCart = this.shoppingCart.filter(item => item.id !== cardId )
 }, 
 ...
}

推荐阅读