VueJs 2 的全局数据

Question

我对 VueJS 比较陌生，而且我不知道如何让一些数据在全球范围内可用。我想保存数据，如 API 端点、用户数据和从 API 检索到的一些其他数据，每个组件都可以访问这些数据。

我知道我可以只用香草 Javascript 来保存它，但我想有一种方法可以用 VueJS 来做到这一点。我也许可以使用事件总线系统来获取数据，但我不知道如何根据我的需要实现这个系统。

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

原文由 StefanJanssen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

创建一个全局数据对象

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

如果你 需要 在你的 Vue 上公开它，你可以。

 new Vue({
    data:{
        shared
    }
})

如果你不这样做，你仍然可以在你的 Vues 或组件中访问它，如果你已经导入它或者它们是在同一页面上定义的。

真的就这么简单。如果需要，您可以将 shared 作为属性传递，或者全局访问它。

当你刚开始时，没有必要变得复杂。 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 和每个组件都可以访问它。这是一个 例子。

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 Store 来保存您的应用程序状态。

 const store = new Vuex.Store({
  state: {
    userData: []
  },
  mutations: {
    setUserData (state, data) {
      state.userData = data
    }
  }
})

有了这个，您可以访问状态对象 store.state ，并使用 store.commit 方法触发状态更改：

 store.commit('setUserData', userData)

console.log(store.state.userData)

原文由 Saniya syed qureshi 发布，翻译遵循 CC BY-SA 4.0 许可协议