Как получить доступ к объекту окна в vue js?

Question

У меня есть этот компонент vue js:

<template>
    <div>
hello world
    </div>
</template>

<script>
  export default {
    name: 'mycomp',
    data: function () {
      console.error("window.google_recaptcha_public_key", window.google_recaptcha_public_key);
      return {

      }
    },
    mounted() {
      let app = this;
      console.error("window.google_recaptcha_public_key2", window.google_recaptcha_public_key);

    },
  }
</script>

<style scoped lang="scss">
</style>

возвращается:

window.google_recaptcha_public_key undefined 
window.google_recaptcha_public_key2 undefined

где я могу оставить безболезненным и счастливым всю глобальную конфигурацию?

обратите внимание, что эта конфигурация живет в моем бэкэнде Laravel. Поэтому я не буду копировать, вставлять все значения из серверной части в интерфейс

Answer 1

U может использовать Vue.prototype в main.js файле или в файле, который вы import Vue

Vue.prototype.Hereanyname = window.hereanyname;

и в вашем приложении Vue вы можете использовать его

Hereanyname.thefunction

Реальный пример по Laravel

в main.js

import Vue from 'vue';
Vue.prototype.Routes = window.routes;

new Vue({
    el: '#app',
    template: '<App/>',
    components: {App}
});

в вашем приложении

:href="Routes.route('laravel.route.here')"

Так что для вашего случая

import Vue from 'vue';
Vue.prototype.GoogleRecaptcha = window.google_recaptcha_public_key;

new Vue({
    el: '#app',
    template: '<App/>',
    components: {App}
});

внутри приложения

mounted() {
  console.log(this.GoogleRecaptcha)
}