This episode is for members only
Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.
Get started
Already a member? Sign in to continue
Playing
06. Creating a Pinia store
Episodes
01. Introduction
2m 53s
0%
02. Setting up
1m 38s
0%
03. Scaffolding chat rooms
6m 11s
0%
04. Building a chat textarea
8m 38s
0%
05. Seeding fake messages in order
4m 8s
0%
06. Creating a Pinia store
3m 48s
0%
07. Creating the messages endpoint
5m 9s
0%
08. Fetching messages into our store
4m 18s
0%
09. Ordering messages with flexbox
3m 59s
0%
10. Using the intersection observer API
5m 5s
0%
11. Fetching and pushing previous messages
3m 15s
0%
12. Storing and appending messages
6m 18s
0%
13. Setting up Reverb
3m
0%
14. Broadcasting new messages
9m 49s
0%
15. Handling broadcasted messages in our store
4m 54s
0%
16. Fetching online users
3m 6s
0%
17. Storing online user state
4m 46s
0%
18. Keeping online users in sync
5m 50s
0%
19. Detecting typing events
3m 56s
0%
20. Showing when a user is typing
8m 3s
0%
21. Better formatted dates
2m 44s
0%
Transcript
00:00
So let's set up a PNIA store and get to grips with some of the basics.
00:05
So the first thing that we'll do is head over to our project and we'll do an npm install on PNIA. Now, what we need to do once that's finished is go over to our app.js file, import it and use it within our view application.
00:21
So the first thing to do will be to import create PNIA. And we pull that in from the PNIA package, of course. And then we go ahead and create this out. So let's create out a PNIA variable and invoke create PNIA.
00:36
And then we go down and just use this like any other plugin. So let's pull that directly into there. And now technically that's installed throughout our application. Now, what we want to do is create out a store.
00:47
So let's go over to our JavaScript directory. I'm going to create out a store directory, or you could call it state, whatever you wanted. And then inside of here, we're going to create out a composable.
00:59
So let's create out a, just a standard JavaScript file called use messages store. And then inside of here, we want to define and export our store. So the first thing that we want to do is import define store for our PNIA.
01:15
And then we go ahead and export this out as use message store. We define that store using that import, and then we give it a name. So in our case, I'm just going to call that messages. Now the object that we pass to here is going to contain getters, or more
01:32
importantly, first our state getters, and also actions as well. So we keep a base state, our getters retrieve from our state and our actions can modify our state. We can also modify our state by patching this outside of our store, but we're
01:48
specifically going to use actions here because inside of this, we're going to make some Axios requests to our backend to then update our state. So let's look at some basic state here. So we define out our state like this and inside of this object, we can just
02:03
put any of the state we need to keep. So for example, a bunch of messages that we push to, we can even keep the page number that we're currently on, all of that kind of stuff, and then we'll define out a really simple getter and grab this data, and then we'll look at actions when
02:18
we get to adding the functionality later. So our getters need to be a different name to our state. We can't call this messages. So let's say all messages for the state we want to return here.
02:29
And into each of our getters, we get access to our state. And then what we do is just return this. So we're just going to return state dot messages. That is as simple as it is.
02:38
Define our state, add a getter, and we can grab this now. Let's take a quick look at how we do this over in our room page just now. So the first thing we want to do is import use messages store from what we've just created.
02:51
And then we want to create this out because it's a composable. We need to invoke it. So let's call this messages and let's invoke use messages store. And now we have access to our store.
03:02
Let's actually call that messages store. That kind of makes sense. Okay. So down somewhere in our template, it doesn't really
03:08
matter where we're doing this. Let's go ahead and just output from our messages store. So messages store, all messages. And that should give us all of our messages in there.
03:17
Of course, at the moment, it's just an empty array. What we can then do is as an example for this text area that we've created here, we could invoke an action on our store, which then pushes to our list of messages. And because this is reactive, this will always update.
03:34
Let's get rid of this for now, though. At least we've set our store up and now we can start to load messages into this. Perform actions to push and we'll have our state nicely working to show everything that we need.
21 episodes•1 hr 41 mins•9 months ago
Overview
Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.
We’ll cover:
- Using the Intersection Observer API to automatically load previous chat messages
- State management with Pinia
- Using presence channels to show online users for each room
- Client-to client communication to show who’s typing
- Using flexbox tricks to keep messages scrolled into view as they roll in
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!