在Vue 2多层嵌套对象中使用Vue.set更新state的问题

咱们都知道，Vue 2里直接给对象新增属性是不会触发响应式更新的，所以必须用Vue.set()（全局）或者组件内的this.$set()来确保新属性能被响应式系统追踪。针对你的state结构，下面是正确的ADD_GOOGLE_INFOS mutation写法：

// 先记得导入Vue
import Vue from 'vue'

const mutations = {
  ADD_GOOGLE_INFOS (state, { index, info }) {
    // 先做一层存在性校验，避免index越界或fields不存在时报错
    if (state.entries[index] && state.entries[index].fields) {
      // 用Vue.set给指定entry的fields添加响应式的googleInfos属性
      Vue.set(state.entries[index].fields, 'googleInfos', info)
    }
  }
}

核心细节解释： #

• Vue.set()的三个参数分别是：目标对象（这里是state.entries[index].fields）、新增属性名（'googleInfos'）、属性值（传入的info）。只有这样添加的属性，才会被Vue的响应式系统监控，视图才会自动更新。
• 加一层存在性判断是为了让代码更健壮——比如传入的index超出了entries数组长度，或者某个entry的fields属性意外缺失时，不会直接抛出错误。

要是需要批量给所有entry添加属性 #

如果你想一次性给数组里所有entry的fields都加上googleInfos，可以在mutation里遍历处理：

ADD_ALL_GOOGLE_INFOS (state, infosList) {
  state.entries.forEach((entry, idx) => {
    if (entry.fields) {
      // 这里假设infosList的索引和entries对应，也可以根据需求调整赋值逻辑
      Vue.set(entry.fields, 'googleInfos', infosList[idx] || {})
    }
  })
}

记住哦，Vue 2的响应式系统只追踪初始定义在state/data里的属性，新增属性必须通过Vue.set来声明，不然视图就不会跟着数据变化啦～

内容的提问来源于stack exchange，提问作者Marine Le Borgne