Vue：属性或方法“APP”未在实例上定义，但在渲染期间引用

Question

我正在修改我的第一个 laravel-vue 应用程序并遇到了一个问题，首先是一些上下文。

为了从 laravel 共享我的全局应用数据以查看我使用这样的内联脚本： 我使用 laravel 的 AppServiceProvider 与我的视图共享全局数据，每次请求都会重新获取这些数据：

public function boot()
    {
        View::composer('*', function ($view) {

            $globals = [
                'appName' => Globals::where('name', 'Nombre de la aplicación')->pluck('value')->first(),
                'appDescription' => Globals::where('name', 'Descripcion de la aplicación')->pluck('value')->first(),
                'appBio' => Globals::where('name', 'Biografia de la aplicacion')->pluck('value')->first(),
                'appBookingPhone' => Globals::where('name', 'Télefono de contacto')->pluck('value')->first(),
                'appPrefixBookingPhone' => Globals::where('name', 'Teléfono para mostrar')->pluck('value')->first(),
                'appMail' => Globals::where('name', 'Email de contacto')->pluck('value')->first(),
                'appFullAddress' => Globals::where('name', 'Dirección completa')->pluck('value')->first(),
                'appZipAddress' => Globals::where('name', 'Contador de visitas')->pluck('int_value')->first(),
                'appSchedules' => $schedules = Schedule::all(),
                'appTwitter' => config('globals.twitter'),
                'appFacebook' => config('globals.facebook'),
                'appInstagram' => config('globals.instagram'),
                'appShowNewsletterModal' => Modal::checkIfShowModal(),
                'appAllClassesPosts' => Post::withCategory('Clases')->take(10)->get(),
                'appAllBehaviourPosts' => Post::withCategory('Conducta canina')->take(10)->get(),
                'appAllTrainingPosts' => Post::withCategory('Formación')->take(10)->get(),
                'appLoggedUser' => Auth::user(),
                'appSchedules' => $schedules = Schedule::all()
            ];
            //dd($globals['appAllBehaviourPosts']);
            $view->with('globals', $globals);
        });
    }

然后我在刀片模板中使用内联脚本与 vue 的实例共享数据：

<script>
window.APP = @json( ["pageInfo" => $pageInfo, "globals" => $globals] );
</script>

然后在我的 MainHeader 组件中，我尝试访问 APP 变量，但出现以下错误：

[Vue warn]: Property or method "APP" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <MainHeader> at resources/assets/js/components/headers/MainHeader.vue
       <Root>

这是我的 MainHeader 组件：

<template>
<header class="header_maincontainer">
    <div class="header_small_container">
        <div class="header_small_contact_container" style="">
		    <span class="header_small_text1">Llamanos al: </span>
            <i class="header_small_phone_icon fa fa-phone"></i>
            <a class="header_small_phone_number" :href="'tel:${APP.globals.appPrefixedBookingPhone}'">{{ APP.globals.appBookingPhone }}</a>
		</div>
		<div class="header_small_social_container" style="">
            <a v-if="APP.globals.twitter != ''" :href="'${APP.globals.twitter}'" target="_blank" class="header_small_social_icon"><i class="fa fa-twitter header_fa"></i></a>
            <a v-if="APP.globals.facebook != ''" :href="'${APP.globals.facebook}'" target="_blank" class="header_small_social_icon"><i class="fa fa-facebook header_fa"></i></a>
            <a v-if="APP.globals.instagram != ''" :href="'${APP.globals.instagram}'" target="_blank" class="header_small_social_icon"><i class="fa fa-instagram header_fa"></i></a>
		</div>
	    <a class="header_small_auth_container" href="/login" v-if="APP.globals.user == ''">
			<div class="header_small_login_icon"><i class="fa fa-user header_fa"></i></div>
            <span class="header_small_login_text" title="Iniciar sesión">Iniciar</span>
        </a>
	    <div class="header_small_auth_container" v-if="APP.globals.user != ''">
	        <a href="/panel-administrador" class="header_small_mail_icon"><i class="fa fa-cog header_fa"></i></a>
			<a href="" class="header_small_login_icon"><i class="fa fa-sign-out header_fa"></i></a>
            <a href="/logout" class="header_small_login_text" title="Cerrar sesión">Salir</a>
        </div>
	</div>
    <div class="header_big_container">
        <div class="header_big_logo_container">
            <a class="header_big_logo_link_wrapper" href="/" title="'Página de inicio de ${APP.globals.appBookingPhone}'" style="background-image:url('/img/logo_yellow.png');"></a>
        </div>
        <div class="header_big_texts_container">
		    <span class="header_big_texts_3">Adiestramiento Canino a Domicilio en Málaga, Costa de Málaga e Interiores</span>
            <span class="header_big_texts_2">Tus especialistas en comportamiento canino</span>
			<a class="header_big_texts_phone" :href="'tel:${APP.globals.appPrefixedBookingPhone}'">{{ APP.globals.appBookingPhone }}</a>
        </div>
    </div>
</header>
</template>

我被困在这里了！

Answer 1

首先，如果您想与 vue.js 共享 laravel 数据，我当然更喜欢使用 PHP 库和 composer 视图。 https://learninglaravel.net/transform-php-vars-to-javascript

---

要共享您在此处拥有的此类数据，您可以在两个方向之间进行选择：

• 从 API 获取数据（使用 GET 为特定数据构建路由）并在 VUE 中使用 AXIOS 从后端获取数据
• 与 composerViews 共享

您的方法类似于作曲家视图，但并不理想：) 阅读此处：https://laravel.com/docs/5.7/views#view-composers 了解更多信息。

如果您选择 composerViews，请确保您正在向仅此路由所需的视图提供数据。如果您不使用它，请不要发送所有内容。

对于我来说，私人的最佳选择是，如果您只与 composerViews 共享所需的数据作为用户信息，其余部分则通过 AXIOS 从每个组件的后端获取，并带有不错的加载器。

---

不过，如果您想为您的结构找到解决方案，请查看您是否将此数据与window.APP 匹配，但在组件中您使用的是APP.{name}。 APP 未定义为本地用途，您需要使用 window.APP.{name}