CODEWITHSUNDEEP
javascriptvue.jsprefetch
user5178150
user5178150

Reputation:

Vue prefetch data from separate backend

I have some queries from an API-Server that returns a json object that will be static over a user session, but not static forever. It's a one-pager with Vue router.

How can I achieve that I: can access this.myGlobals (or similar eg window.myGlobals) in all components, where my prefetched json-data from API-Server is stored.

My approach that is already working is to embed help.js via a mixin.

Oddly enough, I get hundreds of calls to this query. At first I thought that it only happened in the frontend and is chached, but the requests are actually sent hundreds of times to the server. I think it is a mistake of my thinking, or a systematic mistake.

i think the problem is, that the helper.js is not static living on the vue instance

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
        });
    }
}

log in console:

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

log on server:

call
call
call (pew pew)

My next idea would be to learn vuex, but since its a easy problem, im not sure if i really need that bomb ?

Upvotes: 1

Views: 469

Answers (1)

User 28
User 28

Reputation: 5158

You can use plugin to achieve this.

// 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
      })
  }
}

and use it:

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

Upvotes: 1

Related Questions