javascript - 多個components如何共用一個ajax回傳的數據

Question

取得城市元件

<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>

一個頁面可能有多個這樣的元件，這樣的話就請求了多次的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

最後使用了非同步組件的方式

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

Answer 5

多個元件共享資料可以用vuex 或自己定義一個全域的