Utilisez Vue et axios pour mettre à jour les données sans actualiser la page

Question

J'ai une page avec 2 onglets (Questions et Données) réalisée sur Vue et Axios. Dans le premier onglet, je remplis le formulaire et je le soumets - bouton Enregistrer v-on:click="save".

save : function() {
                axios({
                        méthode : 'patch',
                        URL : URL,
                        données : this.data
                    })
                    .then(fonction (réponse) {
                        this.data = réponse.data;
}
Dans le deuxième onglet (Données), j'ai une liste de données enregistrées : 
monté() {
        axios
            .get('/api/recommended-products/?patient_uuid=' + '{{patient.uuid}}')
            .then(response => (this.data= réponse.data.results))
       }
Maintenant, lorsque je modifie la réponse dans l'onglet Questions, la liste dans l'onglet Données devrait changer automatiquement. Si j'actualise la page, cela change - Mounted() fonctionne.
J'ai essayé de créer la fonction updateList()
updateList: function() {
            axios
                .get('/api/recommended-products/?patient_uuid=' + '{{patient.uuid}}')
                .then(response => (this.data= réponse.data.results))
}
et ajoutez-le à la fonction save(), par exemple : 
save : function() {
                axios({
                        méthode : 'patch',
                        URL : URL,
                        données : this.data
                    })
                    .then(fonction (réponse) {
                        this.data = réponse.data;
this.updateList();
}
Le problème est que cette méthode fonctionne une deuxième fois (parfois cela fonctionne et parfois non). Je viens donc d'ajouter location.reload(); à save() mais je n'aime pas cette approche. Est-il possible de mettre à jour la liste des données sans actualiser la page ? Qu'est-ce que je fais de mal avec la fonction updateList() 
            

Answer 1

À mon avis, vous devriez utiliser vuex et son getter.

De cette façon, vous n'avez qu'une seule demande pour toutes vos applications et les données sont automatiquement actualisées une fois le statut mis à jour.

Vous pouvez ensuite accéder aux données en utilisant la propriété 计算 qui sera automatiquement restituée lorsque l'état sera mis à jour.

---

Voici un exemple d'utilisation de plusieurs onglets : https://codesandbox.io/s/vuex-axios-demo-forked-m0cqe4?file=/src/App.vue

Dans cet exemple, je charge les informations de publication via l'API JsonPlaceHolder.

Renvoyez le formulaire à chaque fois (en utilisant la fonction). Appelez l'opération de magasin, puis mettez à jour l'état, déclenchant ainsi le getter pour restituer les données.

Remarque : j'ai chargé le premier message dans Mounted avec une valeur par défaut de 1.