如何使用 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 存储的状态。我想在那里增加新的价值。名字叫schedule

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

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

Uncaught (in promise) TypeError: Cannot use 'in' operator to search 'schedule' in undefined

我该如何解决这个问题？

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 内而不是直接在组件内改变商店状态。