javascript – Wie mehrere Komponenten die von Ajax zurückgegebenen Daten gemeinsam nutzen

Question

Holen Sie sich Stadtkomponenten

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)
                    }
                })
            }
        }
    },

Eine Seite kann mehrere solcher Komponenten enthalten. In diesem Fall werden mehrere Ajax-Anfragen gestellt. Tatsächlich sind die Daten dieselben. Gibt es eine Möglichkeit, die asynchronen Daten nur einmal anzufordern und dann dieselbe Kopie für mehrere solcher Komponenten zu verwenden? ? Daten? Ich habe versucht, Ajax extern zu definieren und cityData zuzuweisen, sodass die Daten nicht direkt aktualisiert werden können

Answer 1

test.json就是你的一个文件，你可以改成.js文件的格式，然后直接改成变量，obj={};不就获取了？也可以用 模块化的。

Answer 2

看你的city组件，city.data().cityData就是你要的结果集

Answer 3

1. 使用 Vuex 管理

2. 在共同的父组件上维护这个值，通过 props 传到子组件，子组件通过 $emit 告知父组件 ajax

Answer 4

最后使用了异步组件的方式

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

Answer 5

多个组件共享数据可以用vuex 或者自己定义一个全局的