Question

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

这是我的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();

我的错误在哪里？

Answer 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>

为什么我的laravel-vue-inertia项目中的道具为空？

1 个答案: