Vue.js电商购物车仅无痕窗口可用及移动端加载异常求助

我正在开发一个电商网站，此前功能运行正常，但实现添加商品至购物车功能后，展示购物车商品时浏览器控制台报错。奇怪的是，该功能在浏览器无痕窗口可完全正常运行。此外，手机浏览器无法加载网站部分服务器端内容，当前使用Bulma CSS框架开发。

cart.vue 文件代码 #

<template>
    <div class="page-cart">
        <div class="columns is-multiline">
            <div class="column is-12">
                <h1 class="title">Cart</h1>
            </div>
            <div class="column is-12 box">
                <table class="table is-fullwidth" v-if="cartTotalLength">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <CartItem 
                            v-for="item in cart.items" 
                            v-bind:key="item.product.id" 
                            v-bind:initialItem="item" 
                            v-on:removeFromCart="removeFromCart"/>
                    </tbody>
                </table>

                <p v-else>Are you gonna stay hungry?...&#128533</p>
            </div>

            <div class="column is-12 box">
                <h2 class="subtitle">Summary</h2>
                <strong>Ksh{{ cartTotalPrice.toFixed(2) }}</strong>, {{ cartTotalLength }} items

                <hr>

                <router-link to="/cart/checkout" class="button is-dark">Proceed to checkout</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import CartItem from '@/components/CartItem.vue'

export default {
    name: 'Cart',
    components: {
        CartItem
    },
    data() {
        return {
            cart: {
                items: []
            }
        }
    },
    mounted() {
        this.cart = this.$store.state.cart
    },
    methods: {
        removeFromCart(item) {
            this.cart.items = this.cart.items.filter(i => i.product.id !== item.productid)
        }
    },
    computed: {
        cartTotalLength() {
            return this.cart.items.reduce((acc, curVal) => {
                return acc += curVal.quantity
            }, 0)
        },
        cartTotalPrice() {
            return this.cart.items.reduce((acc, curVal) => {
                return acc += curVal.product.price * curVal.quantity
            }, 0)
        },
    }
}
</script>

cartItem.vue 组件代码 #

<template>
    <tr>
        <td><router-link :to="item.product.get_absolute_url">{{ item.product.name }}</router-link></td>
        <td>Ksh{{ item.product.price }}</td>
        <td>
            {{ item.quantity }}
            <a @click="decrementQuantity(item)">-</a>
            <a @click="incrementQuantity(item)">+</a>
        </td>
        <td>Ksh{{ getItemTotal(item).toFixed() }}</td>
        <td><button class="delete" @click="removeFromCart(item)"></button></td>
    </tr>
</template>

<script>
export default {
    name: 'CartItem',
    props: {
        initialItem: Object
    },
    data() {
        return {
            item: this.initialItem
        }
    },
    methods: {
        getItemTotal(item) {
            return item.quantity * item.product.price
        },
        decrementQuantity(item) {
            item.quantity -= 1

            if (item.quantity === 0) {
                this.$emit('removeFromCart', item)
            }

            this.updateCart()
        },
        incrementQuantity(item) {
            item.quantity += 1

            this.updateCart()
        },
        updateCart() {
            localStorage.setItem('cart', JSON.stringify(this.$store.state.cart))
        },
        removeFromCart(item) {
            this.$emit('removeFromCart', item)

            this.updateCart()
        },
    },
}
</script>

问题原因分析 #

• 常规窗口报错、无痕窗口正常：无痕窗口不读取常规窗口的localStorage，说明现有localStorage中购物车数据格式异常（比如旧数据结构和新代码不匹配），导致渲染时触发错误。
• removeFromCart字段错误：cart.vue的removeFromCart方法中，判断条件用了item.productid，实际应该是item.product.id，字段名错误会导致删除功能失效，甚至引发数据异常。
• 直接修改Vuex状态：CartItem组件直接修改item.quantity，而item是store状态的引用，Vuex状态应通过mutations修改，直接修改会导致状态不一致，引发响应式问题。
• 移动端加载异常：可能是服务器接口响应头配置问题（如Content-Type错误），或移动端缓存了旧静态资源，导致无法正确请求服务器内容。

解决办法 #

1. 修复removeFromCart字段错误 #

修改cart.vue中的removeFromCart方法，同时同步更新store和localStorage：

removeFromCart(item) {
    this.cart.items = this.cart.items.filter(i => i.product.id !== item.product.id)
    this.$store.commit('UPDATE_CART', this.cart)
    localStorage.setItem('cart', JSON.stringify(this.cart))
}

2. 规范Vuex状态修改流程 #

在Vuex store中定义mutations处理购物车操作，避免直接修改状态：

// store/modules/cart.js
mutations: {
    UPDATE_ITEM_QUANTITY(state, { item, quantity }) {
        const target = state.items.find(i => i.product.id === item.product.id)
        if (target) target.quantity = quantity
    },
    REMOVE_ITEM(state, item) {
        state.items = state.items.filter(i => i.product.id !== item.product.id)
    },
    INIT_CART(state, cartData) {
        state.items = cartData || []
    }
}

修改CartItem组件的方法，通过commit调用mutations：

// cartItem.vue
decrementQuantity(item) {
    const newQuantity = item.quantity - 1
    if (newQuantity <= 0) {
        this.$store.commit('REMOVE_ITEM', item)
    } else {
        this.$store.commit('UPDATE_ITEM_QUANTITY', { item, quantity: newQuantity })
    }
    this.updateCart()
},
incrementQuantity(item) {
    const newQuantity = item.quantity + 1
    this.$store.commit('UPDATE_ITEM_QUANTITY', { item, quantity: newQuantity })
    this.updateCart()
}

3. 清理旧缓存并添加数据校验 #

在页面初始化时校验localStorage数据格式，异常则清空：

// 在store初始化或App.vue的created钩子中
const savedCart = localStorage.getItem('cart')
if (savedCart) {
    try {
        const cartData = JSON.parse(savedCart)
        if (Array.isArray(cartData.items) && cartData.items.every(item => item.product?.id && typeof item.quantity === 'number')) {
            store.commit('INIT_CART', cartData.items)
        } else {
            localStorage.removeItem('cart')
        }
    } catch (e) {
        localStorage.removeItem('cart')
    }
}

4. 解决移动端加载问题 #

• 检查服务器接口响应头，确保Content-Type配置正确（如返回JSON时设为application/json）。
• 给静态资源添加内容哈希版本号（如webpack配置filename: '[name].[contenthash].js'），避免移动端缓存旧资源。
• 使用Chrome远程调试功能连接手机，查看移动端控制台报错，定位具体加载失败原因。

内容的提问来源于stack exchange，提问作者eryq