如何清除旧提交关联缓存 Nuxt.js购物车数据兼容处理方案

如何确保应用打开时就完成旧数据清理 #

别把清理逻辑写在页面mounted里，时机太晚——等组件挂载的时候，Vuex已经读了localStorage里的坏数据，该报的错早就报了。Nuxt下最稳妥的实现方式是用前置客户端插件处理：

• 先给购物车数据结构加版本标记：给当前新的购物车结构定一个版本号，比如v2，单独存在localStorage的固定key（比如CART_SCHEMA_VERSION）里。
• 新建一个客户端插件，比如plugins/cart-version-check.client.js，确保这个插件在所有依赖购物车数据的插件、store逻辑之前加载：

// plugins/cart-version-check.client.js
export default () => {
  const CURRENT_VERSION = 'v2'
  const CART_STORAGE_KEY = '你项目里实际存购物车的localStorage key'
  const VERSION_KEY = 'CART_SCHEMA_VERSION'

  const userLocalVersion = localStorage.getItem(VERSION_KEY)
  if (userLocalVersion !== CURRENT_VERSION) {
    // 版本不匹配，直接清除旧购物车数据、Vuex持久化缓存
    localStorage.removeItem(CART_STORAGE_KEY)
    // 如果你用了vuex-persist类的持久化方案，把对应存储key也一并清掉
    localStorage.removeItem('你的Vuex持久化存储key')
    // 写入当前版本号，避免重复清理
    localStorage.setItem(VERSION_KEY, CURRENT_VERSION)
  }
}

• 最后在nuxt.config.js里把这个插件放在插件列表的最前面注册就行，这个执行阶段远早于页面渲染、Store初始化注水，不会给旧数据触发报错的机会。

比直接清空更优的处理方案 #

直接清空用户购物车是下策，用户攒了半天的待结算商品上来就没了，体验非常差，优先做版本化数据迁移：

• 还是保留上面的版本校验逻辑，但是检测到旧版本数据时，不要直接删除，先把原始旧数据读出来。
• 针对每个历史版本的购物车结构，写对应的转换函数：把旧结构的字段逐字段映射成新结构要求的格式，字段名改了就做重命名，新增的字段补合理默认值，已经废弃的字段直接剔除。
• 转换完做一轮合法性校验，比如必填的商品ID、SKU ID、价格字段是否存在，校验通过的合法数据直接存回localStorage，更新版本号，用户之前加购的商品完全不会丢；只有实在转换不了的损坏数据，再做清空处理。
  举个简单的转换逻辑示例：

// 把v1版本旧购物车数据转成v2新结构
const transV1toV2 = (oldCartData) => {
  return oldCartData
    .map(oldItem => ({
      skuId: oldItem.sku_id, // 旧结构是下划线命名，新结构改驼峰
      quantity: oldItem.count, // 旧结构存数量的字段叫count，新结构改叫quantity
      price: oldItem.price,
      selected: true, // 新结构新增的商品选中状态，默认给选中
      cover: oldItem.goods_img // 旧结构封面图字段叫goods_img，新结构改叫cover
    }))
    .filter(item => item.skuId && item.price > 0) // 过滤掉缺核心字段的坏数据
}

如果你的购物车是和后端账号体系打通的，还可以再补一层逻辑：用户登录状态下，直接拉取服务端存的用户购物车数据覆盖本地缓存，从根源上避免本地结构不一致的问题；未登录的游客用户再走上面的版本校验、迁移、清理逻辑，容错率会高很多。

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