Saya memiliki beberapa pertanyaan dari API-Server yang mengembalikan objek json yang akan statis selama sesi pengguna, tetapi tidak statis selamanya. Ini adalah satu halaman dengan router Vue.

Bagaimana saya bisa mencapainya? Saya: dapat mengakses this.myGlobals (atau sejenisnya misalnya window.myGlobals) di semua komponen, di mana json-data prefetched saya dari API-Server disimpan.

Pendekatan saya yang sudah berhasil adalah menyematkan help.js melalui mixin.

Anehnya, saya mendapatkan ratusan panggilan untuk permintaan ini. Awalnya saya pikir itu hanya terjadi di frontend dan di-chached, tetapi permintaan sebenarnya dikirim ratusan kali ke server. Saya pikir itu adalah kesalahan pemikiran saya, atau kesalahan sistematis.

Saya pikir masalahnya adalah, helper.js tidak hidup statis di instance vue

Main.js:

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

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

Masuk konsol:

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

Masuk ke server:

call
call
call (pew pew) 

Ide saya selanjutnya adalah belajar vuex, tetapi karena ini masalah yang mudah, saya tidak yakin apakah saya benar-benar membutuhkan bom itu?

0
343mps 12 Mei 2021, 11:44

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan plugin untuk mencapai ini.

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

Dan gunakan:

Vue.use(VueResource)
Vue.use(myPlugin)
1
User 28 12 Mei 2021, 09:21