如何在vue js中访问window对象？

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

在 Vue3 中，您不再拥有全局 Vue 实例，因此您需要将窗口分配为应用程序上的全局属性...

// main.js
app.config.globalProperties.window = window

然后在你的组件中，window就可以工作了。

此信息来自无可挑剔的来源。

Answer 2

你应该在Vue.prototype 中保存你的窗口变量

主文件

Vue.prototype.$authUser = window.authUser;

之后，您可以按如下方式访问您的数据：

Vue模板

<div v-text="$authUser.name"></div>

Vue 脚本

let name = this.$authUser.name;

Answer 3

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

Answer 4

提供/注入效果很好。这是 Vue 3 的示例：

main.js

const app = createApp(App)
app.provide('recaptcha_key', window.google_recaptcha_public_key)
app.mount('#app')

我的组件.vue

<script setup>
const { inject } from 'vue'
const recaptchaKey = inject('recaptcha_key')
</script>