Javascript VueJs 2 的全局数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43193409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Global data with VueJs 2
提问by StefanJanssen
Im relatively new with VueJS, and I've got no clue about how to make some data globally available. I would like to save data like API endpoints, user data and some other data that is retrieved from the API somewhere where each component can get to this data.
I know I can just save this with just vanilla Javascript but I suppose there is a way to do this with VueJS. I may be able to use the event bus system to get the data but I don't know how I can implement this system to my needs.
我对 VueJS 比较陌生，我不知道如何使某些数据全局可用。我想将 API 端点、用户数据和其他一些从 API 检索的数据保存在每个组件可以访问这些数据的地方。
我知道我可以只用普通的 Javascript 来保存它，但我想有一种方法可以用 VueJS 来做到这一点。我也许可以使用事件总线系统来获取数据，但我不知道如何根据我的需要实现这个系统。
I would appreciate it if somebody can help me with this.
如果有人可以帮助我，我将不胜感激。
回答by Bert
Make a global data object
制作一个全局数据对象
const shared = {
api: "http://localhost/myApi",
mySharedMethod(){
//do shared stuff
}
}
If you needto expose it on your Vue, you can.
如果你需要在你的 Vue 上公开它，你可以。
new Vue({
data:{
shared
}
})
If you don't, you can still access it inside your Vues or components if you've imported it or they are defined on the same page.
如果你不这样做，如果你已经导入它或者它们被定义在同一页面上，你仍然可以在你的 Vues 或组件中访问它。
It's really as simple as that. You can pass shared as a property if you need to, or access it globally.
就这么简单。如果需要，您可以将 shared 作为属性传递，或者全局访问它。
When you're just starting out there is no real need to get complicated. Vuex is often recommended, but is also often overkill for small projects. If, later, you find you need it, it's not that hard to add it in. It's also really for state managementand it sounds like you just really want access to some global data.
当您刚刚开始时，没有真正需要变得复杂。Vuex 经常被推荐使用，但对于小项目来说也常常是矫枉过正。如果以后发现需要它，添加它并不难。它也确实用于状态管理，听起来您只是真的想访问一些全局数据。
If you want to get fancy, make it a plugin.
如果你想变得花哨，把它做成一个插件。
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"
})
Now, every Vue you create and every component has access to it. Here is an example.
现在，您创建的每个 Vue 和每个组件都可以访问它。这是一个例子。
回答by Saniya syed qureshi
You can use Storewhich will hold your application state.
您可以使用Storewhich 将保持您的应用程序状态。
const store = new Vuex.Store({
state: {
userData: []
},
mutations: {
setUserData (state, data) {
state.userData = data
}
}
})
With this you can access the state object as store.state, and trigger a state change with the store.commitmethod:
有了这个，您可以访问状态对象 as store.state，并使用以下store.commit方法触发状态更改：
store.commit('setUserData', userData)
console.log(store.state.userData)
回答by victor
I just use an environment.js file to store all of my endpoints as object properties.
我只是使用 environment.js 文件将所有端点存储为对象属性。
var urls = {};
urls.getStudent = "api/getStudent/{id}";
etc...
Then I put reference to this environment.js file in the head of document on pages where I have VueJS code that needs access to those endpoints. Im sure there are many ways to do this.
然后，我将对此 environment.js 文件的引用放在我有需要访问这些端点的 VueJS 代码的页面上的文档头部。我确定有很多方法可以做到这一点。
