Vue 从单独的后端预取数据

Question

我有一些来自 API-Server 的查询，returns 一个 json 对象将在用户会话期间保持静态，但不会永远保持静态。这是一个带有 Vue 路由器的单页纸。

我怎样才能做到： 可以在所有组件中访问 this.myGlobals（或类似的 window.myGlobals），其中存储了我从 API-服务器预取的 json-数据。

我的方法 是通过混合嵌入 help.js。

奇怪的是，我收到了数百次对此查询的调用。一开始我以为只是在前端发生的chached，但实际上向服务器发送了数百次请求。我觉得是我的思路失误，或者是系统性的错误。

我认为问题在于，helper.js 不是静态存在于 vue 实例上的

main.js:

import helpers from './helpers'
Vue.mixin(helpers)

helpers.js:

export default {
    data: function () {
        return {
            globals: {},
        }
    }, methods: {
       //some global helper funktions
        },
    }, mounted() {


        let url1 = window.datahost + "/myDataToStore"
        this.$http.get(url1).then(response => {
            console.log("call")
            this.globals.myData = response.data
        });
    }
}

登录控制台：

call
SomeOtherStuff
(31) call
SomeOtherStuff
(2) call 
....

登录服务器：

call
call
call (pew pew)

我的下一个想法是学习 vuex，但由于这是一个简单的问题，我不确定我是否真的需要那个炸弹？

Answer 1

您可以使用插件来实现。

// my-plugin.js

export default {
  install (Vue, options) {

    // start fetching data right after install
    let url1 = window.datahost + "/myDataToStore"
    let myData
    Vue.$http.get(url1).then(response => {
      console.log("call")
      myData = response.data
    })

    // inject via global mixin
    Vue.mixin({
      computed: {
        myData () {
          return myData
        }
      }
    })

    // or inject via instance property
    Vue.prototype.$myData = myData

    // or if you want to wait until myData is available
    Vue.prototype.$myData = Vue.$http.get(url1)
      .then(response => {
        console.log("call")
        myData = response.data
      })
  }
}

并使用它：

Vue.use(VueResource)
Vue.use(myPlugin)

Vue 从单独的后端预取数据

Vue prefetch data from separate backend

javascript

prefetch

vue.js