Laravel Jetstream: 블레이드에서 Inertia 및 Vue 사용까지
Inertia는 어떻게 사용하나요?
Inertia는 처음에는 매우 다르게 보일 수 있지만 Laravel 내에서 경로, 컨트롤러 및 뷰와 같은 것에 대해 생각하는 방식에 실제로 변경되는 것은 없습니다. 여전히 web.php에 경로를 추가하고 컨트롤러를 가리키고 보기를 반환합니다.
주요 차이점은 컨트롤러에서 반환
Inertia::render()한다는 것입니다. 이 응답은 궁극적으로 Vue 구성 요소를 렌더링하고 Laravel 컨트롤러에 정의된 데이터를 전달합니다. Vue + Laravel 사용의 복잡성을 해결합니다.Route::get('posts', 'PostsController@index')->name('posts.index');
public function index()
{
$posts = Post::all();
return Inertia::render('Posts/Index', [
'posts' => $posts
]);
}
조회수는 어디에 입력합니까?
Jetstream을 설치할 때 생성된
resources/js/Pages 폴더가 있습니다. 해당 폴더 내에 Posts/Index.vue를 추가하여 Inertia::render('Posts/Index')를 처리합니다. view('posts.index')와 유사함새로 고칠 때 내 변경 사항은 어디에 있습니까?
Vue를 사용하고 있으므로 vue 구성 요소/페이지를 컴파일해야 합니다. 그렇지 않으면 .vue 파일에서 변경한 내용이 브라우저에 표시되지 않습니다. 기본적으로
npm install 종속성을 설치하고 npm run watch 파일에서 변경 사항을 확인하고 다시 컴파일하는 것을 의미합니다. 다행스럽게도 라라벨은 이것을 사용자 친화적으로 만듭니다. docs보기 데이터에 어떻게 액세스합니까?
vue 구성 요소는
Inertia::render()라고 말할 때와 마찬가지로 컨트롤러 내에서 view()->with()에 추가한 데이터를 자동으로 수신합니다. 주요 차이점은 각 변수를 props의 속성으로 추가해야 vue가 인식하고 블레이드 대신 vue's template 구문을 사용한다는 것입니다.resources/js/Pages/Posts/Index.vue
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Posts
</h2>
</template>
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<div v-for="post in posts" :key="post.id">
{{ post.title }}
</div>
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout'
export default {
props: ['posts'],
components: {
AppLayout
},
}
</script>
@는 무엇입니까? webpack.mix.js<앱 레이아웃>이 무엇인가요?
Jetstream은
resources/js/Jetstream에 있는 양식 요소 및 모달과 같은 항목에 대해 매우 유용한 vue 구성 요소를 많이 제공하지만 <app-layout>는 resources/js/Layouts에 있으며 다음을 렌더링하는 기본 셸입니다. 
이 vue 구성 요소 내에 콘텐츠를 추가하면 자동으로 내비게이션이 설정되고 레이아웃의 좋은 시작점이 됩니다.
내 페이지에 어떻게 연결합니까?
Inertia/Vue 내에서 명명된 경로 사용을 처리하기 위해 Jetstream이 설치됩니다Ziggy. Ziggy의
route 방법 및 <inertia-link> component 사용:<inertia-link :href="route('posts.index')">
Posts
</inertia-link>
<app-layout> 내에서 기본 탐색에 대한 링크를 추가하려면 resources/js/Layouts/App.vue 내에서 레이아웃 파일을 열고 링크를 추가합니다.<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<jet-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</jet-nav-link>
<jet-nav-link :href="route('posts.index')" :active="route().current('posts.index')">
Posts
</jet-nav-link>
</div>
(
<jet-nav-link>는 resources/js/Jetstream의 구성 요소입니다.)양식은 어떻게 제출합니까?
Inertia는 ajax를 사용하여 양식을 제출하는 방법을 제공합니다a really helpful way. 먼저 vue 구성 요소의
v-model 섹션에 정의된 data() ~ connect your inputs ~ @submit 이벤트 처리기를 사용하여 vue state을 사용합니다.<template>
<form @submit.prevent="submit">
<label for="title">Title:</label>
<input id="title" v-model="form.title" />
<label for="body">Body:</label>
<input id="body" v-model="form.body" />
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
form: {
title: null,
body: null
},
}
},
methods: {
submit() {
this.$inertia.post('/posts', this.form)
},
},
}
</script>
메서드 호출 Inertia는 Vue를 어떻게 렌더링합니까?
Laravel Jetstream은 루트 보기를 렌더링 중인
app/Http/Middleware/HandleInertiaRequests의 app.blade.php로 설정합니다.<body class="font-sans antialiased">
@inertia
</body>
Vue가 연결하고 데이터를 전달할 루트 div를 출력하고 있습니다.
<div id="app" data-page="{{ json_encode($page) }}"></div>
resources/js/Pages는 어떻게 정의되나요?
이 매핑은
resources/app.js에서 발생합니다.resolveComponent: (name) => require(`./Pages/${name}`).default,
결론
도움이 되었기를 바랍니다. Jetstream이 매우 강력하다는 것을 알았기 때문에 Jetstream에 대해 더 많이 쓸 계획입니다. 의견이 있으시면 트위터에서 듣고 싶습니다.
Reference
이 문제에 관하여(Laravel Jetstream: 블레이드에서 Inertia 및 Vue 사용까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/im_brian_d/setup-inertia-js-pages-with-vue-and-laravel-jetstream-4pee텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
