如何在Vue JS的main.js文件中獲取全局數據？

Question

以下代碼來自我的main.js文件。在這裏，我使用Vue對象解析來自url的數據，並返回一些數據。現在，在main.js文件中我有另一個GraphChart對象，在這裏我需要一些來自tableData的數據。

怎麼可能？或任何其他技巧？ 現在我什麼都沒有。

var tableData = new Vue({ 
 
    data: { 
 
    items: '' 
 
    }, 
 

 
    methods: { 
 
    graphData: function() { 
 
    var self = this; 
 
    var testdata= ''; 
 
    $.get('http://localhost:3000/db', function(data) { 
 
     self.items = data; 
 
     }); 
 
    }, 
 

 
    }, 
 

 
created: function() { 
 
    this.graphData(); 
 
}, 
 
    computed:{ 
 

 
}); 
 

 

 
new GraphChart('.graph', { 
 
    stroke: { 
 
    width: 24, 
 
    gap: 14 
 
    }, 
 
    animation: { 
 
    duration: -1, 
 
    delay: -1 
 
    }, 
 

 
    // series: needs data from ITEMS object 
 
    series:items._data.radialChart[1] 
 

 
} 
 
)

Answer 1

首先，你將能夠獲得使用tableData.items的數據，如果你離開的地方它是圖的創建。不過，我預計可能會有問題，因爲數據是異步檢索的，這意味着圖表將在數據返回之前創建。

看起來您需要將創建圖表的代碼移動到獲取數據的回調中。

$.get("http://localhost:3000/db", function(data) { 
    self.items = data; 

    new GraphChart(".graph", { 
    stroke: { 
     width: 24, 
     gap: 14 
    }, 
    animation: { 
     duration: -1, 
     delay: -1 
    }, 
    series: self.items._data.radialChart[1] 
    }); 
}); 

而且，你可以用Vue的引用來代替.graph，但你沒有張貼您的模板，所以我不知道在哪裏.graph出現在您的模板。如果繼續使用.graph，則可能還需要將GraphChart的創建包裝在$nextTick中，在這種情況下代碼將爲

$.get("http://localhost:3000/db", function(data) { 
    self.items = data; 

    self.$nextTick(() => { 
    new GraphChart(".graph", { 
     stroke: { 
     width: 24, 
     gap: 14 
     }, 
     animation: { 
     duration: -1, 
     delay: -1 
     }, 
     series: self.items._data.radialChart[1] 
    }); 
    }); 
});