javascript - 使用 VueJs 2 的全局数据

Question

我是 VueJS 的新手，对于如何使某些数据全局可用我一无所知。我想将从 API 端点、用户数据和其他一些从 API 检索到的数据保存在每个组件都可以获取这些数据的地方。
我知道我可以只用普通的 Javascript 保存它，但我想有一种方法可以用 VueJS 来做到这一点。我也许能够使用事件总线系统来获取数据，但我不知道如何根据我的需要实现该系统。

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

Answer 1

制作一个全局数据对象

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 .