Vue刷新页面后state中购物车items为空，如何正确填充数据？

问题核心原因 #

你现有代码存在2个非常明显的逻辑错误，导致刷新后购物车数据没有同步到Vuex：

1. 字段名拼写错误：接口返回的购物车商品字段是attributes.items（复数形式），你在mounted的判断里写的是attributes.item（单数形式），这个条件永远不会命中，所以赋值逻辑根本不会执行
2. 判断逻辑完全写反：你当前的逻辑是「购物车商品为空时才同步数据到Vuex」，但实际需求应该是「只要接口返回了正常的购物车数据，不管有没有商品都要同步到Vuex」

修复步骤 #

1. 修正index.vue中mounted钩子的逻辑

将原有代码替换为如下内容：

mounted() {
  cartHelper.checkCart((response) => {
    // 只要接口返回合法的cart数据，就同步到Vuex
    if (response?.data) {
      this.$store.dispatch('addProductToCart', {
        cart: response.data
      })
    }
  })
}

2. 可选优化：添加Vuex持久化（避免每次刷新都要请求接口）

如果希望刷新后不需要等待接口返回就能立即展示购物车内容，可以安装vuex-persistedstate把购物车数据持久化到本地存储：

• 安装依赖

npm install vuex-persistedstate

• 在Vuex配置中引入插件，仅持久化cart字段：

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  // 保留你原有的state、mutations、actions等配置
  plugins: [
    createPersistedState({
      paths: ['cart']
    })
  ]
})

3. 校验逻辑

修改完成后可以在checkCart的回调中打印response，确认接口返回的结构和数据符合预期，避免接口异常导致数据同步失败。

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