Vue+Vuex购物车增减数量后DOM未实时更新问题求解

根因分析 #

你遇到的DOM不实时更新的问题是Vue2响应式系统的典型限制，底层逻辑如下：

• Vue2的响应式是通过Object.defineProperty API劫持数据属性的getter和setter实现的，只有组件/state初始化时就已经存在的属性才会被自动劫持，具备响应式能力
• 如果你是动态给商品对象新增count属性、或者直接通过索引修改购物车数组的值，这些操作不会触发被劫持的setter，自然无法通知视图更新
• 跳转页面再返回后数据正常，是因为页面重新渲染时直接读取了Vuex中已经更新的最新数据，所以显示正确

修复方案 #

你可以按照优先级选以下任意一种方案修复：

• 提前在Vuex的购物车商品数据初始化时，就给每个商品声明count属性，不要后续动态新增，这是最稳妥的方案
• 如果必须动态添加/修改属性，使用Vue提供的响应式修改API：
  • 修改对象属性：Vue.set(目标对象, '属性名', 属性值) 或者组件内调用this.$set(目标对象, '属性名', 属性值)
  • 修改数组指定索引项：Vue.set(购物车数组, 索引, 新的商品对象)
• 操作购物车数组时使用Vue重写过的响应式数组方法：push()、pop()、splice()、unshift()等，调用这些方法会自动触发视图更新
• 临时方案可以在修改完数量后调用this.$forceUpdate()强制组件重渲染，但不建议长期使用，属于绕过响应式规则的兜底方案

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