如何使用Vuex向状态数组对象添加新值？

Question

我的代码是这样的：

<template>
    ...

    ...
</template>

<script>
export default {
    ...
    methods: {
        ...mapActions([
            'getDataDoctor',
            'getDataSchedule'
        ]),
        async visibilityChanged(isVisible, entry, item) {
            let param = {
                hospitalId: item.hospital_id,
                doctorId: item.doctor_id
            }
            await this.getDataSchedule(param)
            let data = this.dataDoctor
            for (let key in data) {
                this.$set(data[key].find(e => e.doctor_id === item.doctor_id && e.hospital_id === item.hospital_id), 'schedule', this.dataSchedule.schedule)
            }
        }
    },
    computed: { 
        ...mapState({
            dataDoctor: state => state.dataStore.dataDoctor,
            dataSchedule: state => state.dataStore.dataSchedule
        }),
    },
}
</script>

如果我console.log（this.dataDoctor），则结果如下：

或者您可以看到this.dataDoctor：https://pastebin.com/yGjsTBjX

this.dataDoctor是vuex存储中的状态。我想在那里添加新的价值。名称是时间表

我喜欢那样。但是存在这样的错误：

无法在未定义，空值或原始值上设置反应性属性：未定义

未捕获（承诺）TypeError：无法使用'in'运算符在未定义的位置搜索'schedule'

我该如何解决这个问题？

Answer 1

此位看起来不对：

for (let key in data) {
    this.$set(data[key].find(e => e.doctor_id === item.doctor_id && e.hospital_id === item.hospital_id), 'schedule', this.dataSchedule.schedule)
}

从您发布的样本数据中，最多只能找到一个key值的值。对于key的其他值，find将返回undefined，而$set将失败。

尝试一下：

for (const key in data) {
  const entry = data[key].find(e => e.doctor_id === item.doctor_id && e.hospital_id === item.hospital_id)

  console.log(`key is ${key}:`, entry)

  if (entry) {
    this.$set(entry, 'schedule', this.dataSchedule.schedule)
  }
}

当然也有可能所有条目都不匹配。我已包含的控制台日志记录也应帮助您识别这种情况。

我应该补充一点，通常认为在商店mutation中而不是直接在组件内部更改商店状态是一种最佳做法。