javascript – 使用VueJs 2的全局数据

我对VueJS相对较新,而且我不知道如何在全球范围内提供一些数据.我想保存API端点,用户数据和从API检索到的某些其他数据的数据,其中每个组件都可以获取此数据.
我知道我可以用vanilla Javascript来保存它,但我想有一种方法可以用VueJS来做到这一点.我或许可以使用事件总线系统来获取数据,但我不知道如何根据我的需要实现这个系统.

如果有人可以帮助我,我将不胜感激.

解决方法:

创建一个全局数据对象

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.

标签：javascript,vue-js,vue-component,vuejs2
来源： https://codeday.me/bug/20190918/1810874.html