获取城市组件

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，这样不能直接更新数据