如何在Vue JS的main.js文件中获取全局数据？
问题描述：
以下代码来自我的main.js文件。在这里，我使用Vue对象解析来自url的数据，并返回一些数据。现在，在main.js文件中我有另一个GraphChart对象，在这里我需要一些来自tableData的数据。如何在Vue JS的main.js文件中获取全局数据？
怎么可能？或任何其他技巧？ 现在我什么都没有。
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]
}
)
答
首先，你将能够获得使用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]
});
});
});