Verwenden Sie Vue und Axios, um Daten zu aktualisieren, ohne die Seite zu aktualisieren

Question

Ich habe eine Seite mit 2 Registerkarten (Fragen und Daten) auf Vue und Axios erstellt. Im ersten Tab fülle ich das Formular aus und sende es ab – Schaltfläche „Speichern“ v-on:click="save".

save: function() {
                Axios({
                        Methode: 'Patch',
                        URL: URL,
                        Daten: this.data
                    })
                    .then(Funktion (Antwort) {
                        this.data = Antwort.data;
}

Im zweiten Reiter (Daten) habe ich eine Liste der gespeicherten Daten:

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

Wenn ich jetzt die Antwort auf der Registerkarte „Fragen“ ändere, sollte sich die Liste auf der Registerkarte „Daten“ automatisch ändern. Wenn ich die Seite aktualisiere, ändert sie sich – Mounted() funktioniert. Ich habe versucht, die Funktion updateList() zu erstellen.

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

und fügen Sie es der Funktion save() hinzu, zum Beispiel:

save: function() {
                Axios({
                        Methode: 'Patch',
                        URL: URL,
                        Daten: this.data
                    })
                    .then(Funktion (Antwort) {
                        this.data = Antwort.data;
this.updateList();
}

Das Problem ist, dass diese Methode beim zweiten Mal funktioniert (manchmal funktioniert es und manchmal nicht). Also habe ich gerade location.reload(); zu save() hinzugefügt, aber dieser Ansatz gefällt mir nicht. Ist es möglich, die Datenliste zu aktualisieren, ohne die Seite zu aktualisieren? Was mache ich falsch mit der Funktion updateList()

Answer 1

在我看来，你应该使用 vuex 及其 getter。

这样，您在所有应用程序中就只有一个请求，并且一旦状态更新，数据就会自动刷新。

然后，您可以使用计算属性访问数据，该属性将在状态更新时自动重新渲染。

---

以下是使用多个选项卡的示例： https://codesandbox.io/s/vuex-axios-demo-forked-m0cqe4?file=/src/App.vue

在此示例中，我通过 JsonPlaceHolder API 加载帖子信息。

每次重新发送表单（使用函数）。调用 store 的操作，然后更新状态，从而触发 getter 重新渲染数据。

注意：我将第一篇文章加载到 Mounted 中，默认值为 1。