javascript - 多个components如何共用一个ajax返回的数据

Question

获取城市组件

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

一个页面可能有多个这样的组件，这样的话就请求了多次的ajax，实际上数据都是一样的，有没有一种方法实现只请求一次异步数据，然后多个这样的组件用同一份数据？尝试了在外部定义ajax，然后赋值给cityData，这样不能直接更新数据

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 或者自己定义一个全局的