Saya ingin mengatur status awal variabel data di dalam komponen dari vuex store.

Namun, saya melakukan panggilan api untuk memperbarui toko vuex dari komponen untuk memastikan bahwa datanya mutakhir.

Jadi di komponen saya, saya memiliki yang berikut ini yang memulai pembaruan

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

Pesan dikembalikan dari API saya dan ini diambil di index.js utama saya:

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

Dan pembaruan terjadi dengan mutasi di store.js

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

Data yang ditarik akan digunakan untuk mengisi nilai awal kotak teks dalam komponen. Saya pikir saya dapat mengatur properti yang dihitung untuk mengakses objek dalam status vuex

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

Dan kemudian atur objek data dengan nilai dari objek yang dihitung.

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

Saya kemudian dapat menggunakan v-model untuk melacak perubahan pada nilai kotak teks.

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

Namun, di mana pun saya meletakkan panggilan API dalam siklus hidup komponen, saya mendapatkan kesalahan nilai yang tidak ditentukan:

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

Tampaknya toko vuex tidak diperbarui sebelum saya mencoba mengaksesnya dalam definisi data. Adakah yang punya ide bagaimana saya bisa mencapai ini?

Terima kasih,

Martyn

0
MartynW 10 Juli 2020, 16:04

1 menjawab

Jawaban Terbaik

Adapun komentar, mendeklarasikan string reaktif, yang berasal dari objek yang dipakai oleh panggilan http bukanlah solusi terbaik. Saat komponen Anda dipasang, permintaan http kemungkinan besar belum selesai.

Untuk menyederhanakan, Anda dapat mengubah hasil komputasi Anda menjadi:

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 : "";
    }
},

Dan hapus tag dari data()

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