如何在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] 
    }); 
    }); 
});