javascript - Comment plusieurs composants partagent les données renvoyées par Ajax

Question

Obtenez des composants de la ville

<code class="javascript">city: {
        template: '#city_template',
        data: function () {
            return {
                cityData: cityData,//城市数据
                selectedOptions:[24,81],//被选中的城市
                list:[],
            }
        },
        mounted: function () {
                this.getCity()
        },
        methods: {
            getCity: function () {
                var self = this
                $.ajax({
                    url:'test.json',
                    success:function (res) {
                        self.$set(self.$data, 'cityData', res)
                    }
                })
            }
        }
    },</code>

Une page peut avoir plusieurs de ces composants. Dans ce cas, plusieurs requêtes ajax seront effectuées. En fait, les données sont les mêmes. Existe-t-il un moyen de demander des données asynchrones une seule fois, puis d'utiliser la même copie pour plusieurs de ces composants. ? données? J'ai essayé de définir ajax en externe et de l'attribuer à cityData, afin que les données ne puissent pas être mises à jour directement

Answer 1

test.json est un de vos fichiers. Vous pouvez le changer au format d'un fichier .js, puis le changer directement en variable Obj={} ; Des modèles modulaires sont également disponibles.

Answer 2

Regardez votre composant city, city.data().cityData est l'ensemble de résultats que vous souhaitez

Answer 3

1. Gérer avec Vuex

2. Maintenez cette valeur sur le composant parent commun, transmettez-la au composant enfant via les accessoires, et le composant enfant notifie le composant parent d'ajax via $emit

Answer 4

Enfin, nous avons utilisé des composants asynchrones

<code>Vue.component(ele,function (resolve, reject) {
                getCity().then(function (data) {
                    resolve(comInherit.extend(obj[ele]));
                }).catch(function (error) {
                    alert(error)
                })
            });</code>

Answer 5

Pour partager des données entre plusieurs composants, vous pouvez utiliser vuex ou en définir vous-même un global