通过外部 api 调用设置 vue 组件中数据的值

Question

我想从 vuex 存储中设置组件内数据变量的初始状态。

但是，我通过 api 调用从组件更新 vuex 存储，以确保数据是最新的。

所以在我的组件中，我有以下启动更新的内容

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

消息从我的 API 返回，并在我的主 index.js 中提取：

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

并且更新通过 store.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
        }
    },

然后我可以使用 v-model 来跟踪文本框值的变化。

<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

对于 cmets，声明一个响应式字符串，来自一个通过 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
    }