Gunakan Vue dan axios untuk mengemas kini data tanpa memuat semula halaman

Question

Saya mempunyai halaman dengan 2 tab (Soalan dan Data) dibuat pada Vue dan Axios. Dalam tab pertama saya mengisi borang dan menyerahkan - butang simpan v-on:click="save".

save: function() {
                aksios({
                        kaedah: 'tampalan',
                        url: url,
                        data: ini.data
                    })
                    .then(fungsi (tindak balas) {
                        ini.data = respon.data;
}

Dalam tab kedua (Data) saya mempunyai senarai data yang disimpan:

mounted() {
        aksios
            .get('/api/recommended-products/?patient_uuid=' + '{{patient.uuid}}')
            .then(respon => (this.data= response.data.results))
       }

Sekarang apabila saya menukar jawapan dalam tab Soalan, senarai dalam tab Data akan berubah secara automatik. Jika saya memuat semula halaman ia berubah - Mounted() berfungsi. Saya cuba mencipta fungsi updateList()

updateList: function() {
            aksios
                .get('/api/recommended-products/?patient_uuid=' + '{{patient.uuid}}')
                .then(respon => (this.data= response.data.results))
}

dan tambahkannya pada fungsi save()

save: function() {
                aksios({
                        kaedah: 'tampalan',
                        url: url,
                        data: ini.data
                    })
                    .then(fungsi (tindak balas) {
                        ini.data = respon.data;
this.updateList();
}

Masalahnya ialah cara ini berfungsi untuk kali kedua (kadangkala ia berkesan dan kadangkala tidak). Jadi saya hanya menambah location.reload(); kepada save() Adakah mungkin untuk mengemas kini senarai data tanpa memuat semula halaman? Apa yang saya buat salah dengan fungsi updateList()

Answer 1

Pada pendapat saya, anda harus menggunakan vuex dan pengambilnya.

Dengan cara ini, anda hanya mempunyai satu permintaan di semua aplikasi anda dan data dimuat semula secara automatik setelah status dikemas kini.

Anda kemudian boleh mengakses data menggunakan 计算property yang akan dipaparkan semula secara automatik apabila keadaan dikemas kini.

---

Berikut ialah contoh penggunaan berbilang tab: https://codesandbox.io/s/vuex-axios-demo-forked-m0cqe4?file=/src/App.vue

Dalam contoh ini, saya memuatkan maklumat siaran melalui API JsonPlaceHolder.

Hantar semula borang setiap masa (menggunakan fungsi). Panggil operasi kedai dan kemudian kemas kini keadaan, sekali gus mencetuskan pengambil untuk memaparkan semula data.

Nota: Saya memuatkan siaran pertama ke Mounted dengan nilai lalai 1.