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
25. Preserving state

Episodes

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

Transcript

00:00
Similar to the state being preserved in our form, we can also generally preserve states
00:06
when we're making routing requests as well. Let's look at another example of how this is a problem and how we can implement a solution. So let's go ahead and type something in here. We know that already if we click through to another page and back again, this is preserved.
00:21
But what happens if we type something in here and then make another routing request to somewhere else? Now we know that when we refresh comments, technically what we're doing with the router is making a request through to this page again and requesting the posts. So when I click this, because that's making another request and we're not explicitly
00:40
preserving the state, this actually disappears. So that's a bit of an issue. The page is being re-rendered. The state here is being lost despite the fact that we are passing this key in here.
00:52
So how do we fix this up? Well, let's go down to where we are refreshing our comments and we've used preserve scroll and only. There's another option that we can pass through to here, which is preserve state. So this will preserve the state of your page.
01:08
So when you are doing something like reloading posts in, it's going to preserve everything else for you. Let's take a look at an example by going over to the database manually and creating out another comment here.
01:20
So let's say this is a new comment and let's set a new date for that. Hit save changes and let's go over, type something into here. Remember before when we press refresh comments, this disappeared. That's not the case anymore.
01:35
The new data is loaded in and because we have used that preserve state option, this state is being preserved as well. So just one more thing that may catch you out when you're doing things like this, making additional requests.
01:49
These options are available for you to use when you need to. Now, earlier we looked at using this as a link as well. You can actually use this as well. So we use preserve scroll here.
02:01
If you wanted to and needed to for any reason, you can also use preserve state in here. We're not going to do that now because like I said before, a link for refreshing this content doesn't make much sense. But now we are preserving this state via a button when we're making a routine request.
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!

Comments

No comments, yet. Be the first to leave a comment.