Javascript 使用VueJs 2的全局数据

我对VueJS比较陌生，我不知道如何使一些数据在全球范围内可用。我希望将API端点、用户数据和从API检索的其他数据等数据保存在每个组件都可以访问这些数据的地方。
我知道我可以用普通的Javascript来保存它，但我想有一种方法可以用VueJS来实现这一点。我可能能够使用事件总线系统来获取数据，但我不知道如何根据我的需要实现该系统

---

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

制作一个全局数据对象

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

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

new Vue({
    data:{
        shared
    }
})

如果不这样做，如果已导入或在同一页面上定义了VUE或组件，则仍可在VUE或组件中访问它

就这么简单。如果需要，可以将共享作为属性传递，也可以全局访问它

当你刚开始工作时，没有必要变得复杂。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"
})

const共享={
信息：“我的全球信息”
}
shared.install=函数（）{
Object.defineProperty（Vue.prototype，$myGlobalStuff'{
get（）{return shared}
})
}
Vue.使用（共享）；
组件（“我喜欢的组件”{
模板：“我喜欢的东西：{{$myGlobalStuff.message}”
})
新Vue({
el:“应用程序”
})

---

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

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

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

---

然后，我将对environment.js文件的引用放在文档开头的页面上，在这些页面上我有需要访问这些端点的VueJS代码。我相信有很多方法可以做到这一点。

您可以使用

存储

，它将保存您的应用程序状态

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)

Vue Mixin

// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
  data: function() {
    return {
      get $asset() {
        return "Can't change me!";
      }
    }
  }
})

模板

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>

---

Vue.js有一个名为Vuex的状态管理解决方案：它可以实现您提到的所有功能。回答得很好！在codepen中，你应该用

$myGlobalStuff

来代替

$store

。@AbhishekJain甚至没有注意到：）谢谢！您是否也能阐明如何使此共享对象具有反应性？我试图在

挂载的
回调中编辑
消息
，但它没有更新视图。@AbhishekJain如果您采取第一种方法并在
数据
上公开
共享的
，则对象属性将转换为观察到的（反应性）值。如果采用插件方法，最简单的方法是使
shared
a Vue:
const shared=new Vue（{data:{message:'my global message'}}）
。然后，
信息
将是反应性的。@AbhishekJain我不确定这两个都是更好的。插件方法（特别是当使用Vue作为共享对象时）是Vuex采用的方法的一个非常基本的示例。在Vuex的引擎盖下，数据存储在Vue对象上，以使其具有反应性，因此您可以认为它符合“官方”流程。
Vue.prototype.$asset = 'My App'