如何在Vuex的forEach循环中正确引用state中的对应元素？

问题原因 #

你改成state.list[element]写法后功能不生效，主要存在两个可排查的问题：

1. 判断逻辑错误：你原代码中保留的if (state.list[element])判断，是校验对应属性的值是否为真。而你初始化的a/b/c属性值都是false，所以判断永远不会通过，赋值逻辑根本不会执行。
2. Vue2响应式限制：如果你用的是Vue2，且后续可能会给list添加初始未声明的属性，直接通过state.list[element] = xxx赋值不会触发响应式更新，视图不会同步变化。

正确实现方案 #

方案1：适配Vue3 / Vue2且所有key均提前声明 #

如果你所有需要操作的key（如a/b/c）都已经提前在state的list对象里声明过，直接修正判断逻辑即可：

mutations: {
  SET_LIST(state, el) {
    el.forEach(element => {
      // 改为判断key是否存在，而非判断值是否为真
      if (Object.prototype.hasOwnProperty.call(state.list, element)) {
        state.list[element] = true
      }
    })
  }
}

如果不需要校验key是否存在，可以直接去掉判断：

mutations: {
  SET_LIST(state, el) {
    el.forEach(element => state.list[element] = true)
  }
}

方案2：适配Vue2且可能存在未提前声明的key #

需要用Vue提供的set方法触发响应式更新，首先在store文件头部引入Vue：

import Vue from 'vue'

// ...其他代码
mutations: {
  SET_LIST(state, el) {
    el.forEach(element => {
      Vue.set(state.list, element, true)
    })
  }
}

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