Установить значение данных в компоненте vue из внешнего вызова API

Question

Я хотел бы установить начальное состояние переменной данных внутри компонента из хранилища vuex.

Однако я выполняю вызов api для обновления хранилища vuex из компонента, чтобы гарантировать, что данные обновлено.

Итак, в моем компоненте у меня есть следующее, которое инициирует обновление

    created: function () {
        uibuilder.send('getSchedules')
    },

сообщение возвращается из моего API, и оно отображается в моем основном индексе. js:

this.$store.commit('schedules/SAVE_SCHEDULES', newVal.payload);

и обновление происходит путем мутации в магазине. js

    SAVE_SCHEDULES(state, schedules) {
        state.schedules = schedules;
    },

Данные, которые втягиваются, должны использоваться для заполнения начального значения текстовое поле в компоненте. Я думал, что могу установить вычисляемое свойство для доступа к объекту в состоянии vuex

    computed: {
        schedule() {
            return this.$store.getters['schedules/getScheduleByName'](this.picked);
        },
    },

, а затем установить объект данных со значением из вычисляемого объекта.

    data() {
        return {
            picked: 'shd-1',
            tag: this.schedule.tag
        }
    },

I затем можно использовать v-модель для отслеживания изменений значения текстового поля.

<input type="text" id="shd-tag" class="mb-2" v-model="tag">

Однако независимо от того, где я помещаю вызов API в жизненный цикл компонента, я получаю ошибку неопределенного значения:

Error in data(): "TypeError: Cannot read property 'tag' of undefined"

Кажется, что хранилище vuex не обновляется, прежде чем я попытаюсь получить к нему доступ в определении данных. У кого-нибудь есть идеи, как я могу этого добиться?

Спасибо,

Мартын

Answer 1

Что касается комментариев, объявление реактивной строки, исходящей от объекта, экземпляра которого создается с помощью http-вызова, - не лучшее решение. Когда ваш компонент смонтирован, http-запрос, скорее всего, еще не завершен.

Для упрощения вы можете изменить свой вычисленный на:

computed: {
    schedule() {
        return this.$store.getters['schedules/getScheduleByName'](this.picked);
    },
    //this will return the tag if present, or an empty string
    tag() {
      return (this.schedule.tag) ? this.schedule.tag : "";
    }
},

и удалить тег из data ()

    return {
        picked: 'shd-1',
         //now instead of the tag declared here,
         //you can call your computed property tag in the same exact way
    }