使用 VueJs 2 的全局数据

Question

我是 VueJS 的新手，对于如何使某些数据全局可用我一无所知。我想保存 API 端点、用户数据和一些其他数据，这些数据是从 API 某个地方检索到的，每个组件都可以访问这些数据。
我知道我可以只用 vanilla 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.

Answer 2

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

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

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

Answer 3

您可以使用 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)

Answer 4

Vue 混合

// 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.prototype.$asset = 'My App'

使用 VueJs 2 的全局数据

Global data with VueJs 2

javascript

vue.js

vue-component

vuejs2