Inertia.js - monolit modern

Inersia - monolit modern



Apakah Anda tahu cara menulis SPA di Laravel? Singkatnya, sangat tidak nyaman. Tentu saja, Anda dapat menggunakan kerangka kerja front-end apa pun. Secara tradisional, biasanya bekerja dengan bundel Laravel + Vue.js.



Kami menulis seluruh frontend di Vue.js resources/js, dan menggunakan Laravel sebagai API.



Sesuatu seperti ini:



Vue.js



// resources/js/pages/Users.vue
<template>
    <div v-for="user in users" :key="user.id">
        <a :href="`/users/${user.id}`">
          {{ user.name }}
        </a>
        <div>{{ user.email }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                users: []
            }
        },
        methods: {
            async loadUsers() {
                const { data } = await this.$axios.get('/api/users');.
                this.users = data;
            }
        },
        async beforeMount() {
            await this.loadUsers();
        }
    }
</script>


Laravel



// routes/api.php
Route::get('/users', function index(User $user) {
    return $user->all();
});


Yaitu, pertama kita membuat titik akhir di backend, dan kemudian di depan kita menerima data darinya melalui permintaan AJAX.



? . . AJAX – . , Blade, , .



Blade, , :



return view('users', [
    'users' => $user->all()
]);


? , - -. Blade - . Laravel – API, - . .. ..



Inertia.js. , Blade. – Vue, React Svelte.



Laravel, Inertia.js Rails. . (, Symfony Yii2).



Vue.js Laravel. , .



return Inertia::render('Users', [
    'users' => $user->all()
]);


props.



props: {
  users: Array,
},


! .



- №2: (Vue Router, React Router) . – routes Vue- resources/js/Pages ( ). , Blade, , component.blade.php Component.vue.



: . AJAX-, , - . AppServiceProvider



Inertia::share([
    'errors' => function () {
        return Session::get('errors')
            ? Session::get('errors')->getBag('default')->getMessages()
            : (object) [];
    },
]);


Vue- $page.errors.



<div v-if="$page.errors.first_name">{{ $page.errors.first_name[0] }}</div>


.



, ( ), "", , .



Inertia::share([
    // 
    'app' => [
        'name' => Config::get('app.name')
    ],
    // 
    'auth' => function () {
        return [
            'user' => Auth::user() ? [
                'id' => Auth::user()->id,
                'first_name' => Auth::user()->first_name,
                'last_name' => Auth::user()->last_name,
            ] : null
        ];
    }
]);


, , – , – (1, 2).



, , , . - , .



. , , , . . , , .



, .



-, Inertia.js . , - Inertia.js, . , ( ).



-, Server-Side Rendering (SSR). , , , , SPA SSR, . , , , , . SSR, – Livewire. - .



-, Inertia.js – . – v0.1.9. , .



, web- .




All Articles