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

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

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

Answer 4

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

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

然后我在文档的头部引用这个environment.js文件，在那里我有需要访问这些端点的VueJS代码。我确定有很多方法可以做到这一点。

使用VueJs 2

4 个答案: