Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
24. Remembering form state

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So we're going to hop back over to our form now and speak about something I think is really important that might catch you out when you are building out particularly forms. So if I go ahead and start to type a message into here and then I redirect over to another page, let's see what happens when we navigate back in the browser.
00:18
You can see that that message has been lost. Now, in a normal non-single page application, what would actually happen was that form state would be preserved inside of that text area. However, in our case, it's not because remember when we click through to a page,
00:35
we're making a separate request to re-render a component, pulling down new data. When we go back, it's just going back to the page that we were on and all of that state is lost. So if you find yourself having the same issue with forms, here's how we go and fix that. So let's open up index.view and let's go to where we are creating our form just here.
00:59
Inertia does come with another composable called use remember. I'd recommend going ahead and checking the docs on that. It's not something you'll use very often, but this is a very, very similar concept. It's just the ability to keep state within something.
01:16
Now, for the form helper, what we can actually do is pass a key through as the first argument and then the data as the second argument. And the key can be pretty much anything you want here. So for example, this could be store comment.
01:30
You could say store.comment. However you want to structure the keys to remember this data. But what this is going to do is it's going to preserve the state of your form between inertia routing requests.
01:43
So let's go ahead and type something out in here again. Hello there. I'm going to go ahead and click through to another page and then I'm going to go ahead and click back.
01:51
And sure enough, as if by magic, you can see that our form state has been preserved. So that's just a really small thing, but something that you need to add in if you want the same behavior as a standard app. And inertia clearly makes this incredibly easy to make this work.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!