Блог

У меня есть несколько запросов от API-сервера, который возвращает объект json, который будет статичным в течение сеанса пользователя, но не будет статичным навсегда. Это один пейджер с маршрутизатором Vue.

Как я могу добиться этого я: могу получить доступ к этому.myGlobals (или аналогичному, например, window.myGlobals) во всех компонентах, где хранятся мои предварительно выбранные json-данные с API-сервера.

Мой подход, который уже работает, заключается в том, чтобы внедрить help.js через миксин.

Как ни странно, я получаю сотни звонков на этот запрос. Сначала я думал, что это происходит только во внешнем интерфейсе и кэшируется, но на самом деле запросы отправляются на сервер сотни раз. Я думаю, что это ошибка моего мышления или систематическая ошибка.

я думаю, проблема в том, что 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, но поскольку это простая проблема, я не уверен, действительно ли мне нужна эта бомба ?

Для этого вы можете использовать плагин.

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