全球数据与VueJs 2

即时通讯相对较新的VueJS，我不知道如何使一些数据全球可用。我想保存API端点，用户数据和其他一些数据，这些数据是从API中获取的，每个组件都可以获取到这些数据。
我知道我可以保存这只是香草Javascript，但我想有一种方法可以做到这一点与VueJS。我可能能够使用事件总线系统获取数据，但我不知道如何才能实现这个系统以满足我的需求。全球数据与VueJs 2

如果有人能帮助我，我将不胜感激。

来源

2017-04-03 StefanJanssen

Vue.js有一个名为Vuex的状态管理解决方案：[documentation]（http://vuex.vuejs.org/en/）它完成了你所提到的一切。 – wostex

建立一个全球性的数据对象

const shared = { 
    api: "http://localhost/myApi", 
    mySharedMethod(){ 
     //do shared stuff 
    } 
}

如果需要暴露在你的Vue，你可以。

new Vue({ 
    data:{ 
     shared 
    } 
})

如果不这样做，你仍可以在VUES或组件内访问它，如果你已经导入它或它们在同一页面上定义。

它的确如此简单。如果需要，您可以传递共享作为属性，或者全局访问它。

当你刚开始时，没有真正需要变得复杂。 Vuex通常是推荐的，但对于小型项目来说也经常是过度的。如果以后，你发现你需要它，它不是很难添加它。它也真的是状态管理，它听起来像你只是真的想要访问一些全球数据。

如果你想变得花哨，使它成为一个插件。

const shared = { 
    message: "my global message" 
} 

shared.install = function(){ 
    Object.defineProperty(Vue.prototype, '$myGlobalStuff', { 
    get() { return shared } 
    }) 
} 

Vue.use(shared); 

Vue.component("my-fancy-component",{ 
    template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>" 
}) 

new Vue({ 
    el: "#app" 
})

现在，您创建的每个Vue以及每个组件都可以访问它。这是一个example。

来源

2017-04-03 20:13:58 Bert

这对一个简单的案例更好，谢谢这个提示。 – wostex

很好的答案！在codepen中，你应该控制'$ myGlobalStuff'而不是'$ store'。 –

@AbhishekJain甚至没有注意到:)谢谢！ – Bert

我只是使用environment.js文件将所有端点存储为对象属性。

var urls = {}; 
urls.getStudent = "api/getStudent/{id}"; 
etc...

后来我把参照本environment.js文件中的文件在哪里我都需要访问这些端点VueJS代码页头。我确定有很多方法可以做到这一点。

来源

2017-04-03 20:15:25 victor

全球数据与VueJs 2

回答

相关问题