时间戳

首页 > 解决方案 > 如何使用 Vuex 向状态数组对象添加新值？

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

问题描述

我的代码是这样的：

<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 存储的状态。我想在那里增加新的价值。名字是时间表

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

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

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

我怎么解决这个问题？

标签： vue.jsmultidimensional-arrayvuejs2vue-componentvuex

解决方案

这一点看起来不对：

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将失败。findundefined$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我应该补充一点，通常认为在商店内而不是直接在组件内改变商店状态是最佳实践。

推荐阅读