Get city components
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)
}
})
}
}
},A page may have multiple such components. In this case, multiple ajax requests will be requested. In fact, the data is the same. Is there a way to only request asynchronous data once, and then use multiple such components? The same data? I tried defining ajax externally and assigning it to cityData, so the data cannot be updated directly
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
test.json is a file of yours. You can change it to the format of a .js file, and then directly change it to a variable. Obj={}; won’t it be obtained? Modular ones are also available.
Look at your city component, city.data().cityData is the result set you want
Manage with Vuex
Maintain this value on the common parent component, pass it to the child component through props, and the child component notifies the parent component of ajax through $emit
Finally, we used asynchronous components
To share data between multiple components, you can use vuex or define a global one yourself