Build a Realtime Chat with Laravel, Vue and Pinia
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

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

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.

Episode summary

In this episode, we dive right into setting up a Pinia store in our Vue project. First off, we install Pinia using npm and wire it up in our main application file (app.js) to ensure it's available everywhere in our app.

Then we walk through creating a dedicated directory (like store/ or state/) for our store files, following best practices for organizing state management logic. Inside, we create our first store using a composable pattern and Pinia's defineStore function. We give our store a name (in this case, "messages") and structure it with basic state, getters, and (eventually) actions.

You’ll see how to define simple state—like an array of messages—and add a getter to neatly retrieve all messages from the state. Next, we import and use the store in one of our Vue components, making sure to invoke it as a composable so we get access to that reactive store data.

Finally, we test things out by outputting the (currently empty) messages array in our app, and discuss how actions will later be used to handle updates, like adding new messages. By the end of this episode, your Pinia store scaffolding will be up and running, ready to manage and display your app's state!

Episode discussion

No comments, yet. Be the first!