如何在Vuex store中存储数据？刷新页面后购物车无法操作问题排查

算力阿峰

2026-9-24

问题根因

1. Vue2 响应式系统限制（最高概率）

如果你使用的是Vue2框架，当你没有在Vuex的state中提前声明cart的完整初始结构（比如初始仅设置cart: null、cart: []或者仅声明了部分外层字段），直接通过state.cart = cart把后端返回的购物车数据整体赋值时，购物车内商品的嵌套属性不会被Vue的响应式系统劫持，后续你修改这些属性时不会触发视图更新，看起来就像增删改操作失效了。
刷新前购物车数据是前端逐步生成的，属性已经被响应式代理，所以操作正常；刷新后直接赋值后端返回的完整对象，响应式丢失，操作就不生效了。

2. 操作逻辑不符合Vuex规范

如果你后续对购物车执行增删改时，没有通过提交mutation修改state，而是直接在组件中修改this.$store.state.cart的属性，刷新前的临时数据有响应式还能生效，刷新后响应式丢失后修改就完全不触发更新。

3. 后端返回数据为不可修改对象

部分请求库或者序列化逻辑会把接口返回的JSON数据标记为不可扩展对象，直接赋值给state后无法新增、删除属性，导致操作失败。

修复方案

修复响应式丢失问题：

首先在state中提前声明cart的完整初始结构：

// Vuex state 初始化
export default () => ({
  cart: {
    items: [], // 提前声明商品列表字段
    totalCount: 0,
    totalAmount: 0
    // 所有用到的购物车相关字段都提前声明
  }
})

修改STORE_CART mutation，用Vue提供的响应式API赋值：

import Vue from 'vue'
export const STORE_CART = (state, {cart}) => {
  // 数组类型用这个写法
  // state.cart = [...cart]
  // 对象类型用Vue.set保证响应式
  Vue.set(state, 'cart', cart)
}

规范操作逻辑：所有购物车的增删改操作都必须通过提交mutation执行，禁止直接修改state属性。
修复不可修改对象问题：如果接口返回的是冻结对象，赋值前先做深拷贝：
```
export const STORE_CART = (state, {cart}) => {
  state.cart = JSON.parse(JSON.stringify(cart))
}
```