为什么我的 laravel-vue-inertia 项目中的 props 是空的？答案

【问题标题】：Why are my props empty in my laravel-vue-inertia project?为什么我的 laravel-vue-inertia 项目中的 props 是空的？
【发布时间】：2020-02-19 03:11:11
【问题描述】：

我正在开始一个新项目，但我不确定为什么我的 vue devtools 中的道具是空的？关于我登录的用户的信息在哪里？我是否必须在某个地方设置该选项？

这是我的 app.js

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'
import ElementUI from 'element-ui'
import lang from 'element-ui/lib/locale/lang/es'
import 'element-ui/lib/theme-chalk/reset.css'
import locale from 'element-ui/lib/locale'

locale.use(lang);
Vue.use(InertiaApp);
Vue.use(ElementUI);


const app = document.getElementById('app');
app.setAttribute(':class',"{'loaded': loaded}");
new Vue({
    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
        },
        data(){
            return{
                loaded:true
            }
        }
    }),
}).$mount(app);

这是我的 webpack.mis.js

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.runtime.esm.js',
                '@': path.resolve('resources/js'),
            },
        },
    })
    .babelConfig({
        plugins: ['@babel/plugin-syntax-dynamic-import'],
    })
    .version();

我的错误在哪里？

【问题讨论】：

是的，您必须在 Providers 中设置要在 AppServiceProvider 内部共享的数据。检查惯性文档以共享数据

标签： laravel vue.js inertiajs

【解决方案1】：

处理经过身份验证的用户的一种方法是将share登录用户作为道具。

执行此操作的快速方法是转到您的 AppServiceProvider.php 文件并将以下内容添加到您的 register() 方法中。

Inertia::share('auth.user', function () {
    if (Auth::user()) {
        return [
            'id' => Auth::user()->id,
            'first_name' => Auth::user()->first_name,
            'last_name' => Auth::user()->last_name,
        ];
    }
});

通过$page 变量访问数据。

<template>
    <p>{{ $page.auth.user.first_name }}</p>
</template>

【讨论】：