Intermediate Vue

WeekStore with Pinia Exercise

Ben Hong
Pandan Studio
Intermediate Vue

Lesson Description

The "WeekStore with Pinia Exercise" Lesson is part of the full, Intermediate Vue course featured in this preview video. Here's what you'd learn in this lesson:

Ben instructs students to set up a weak store with Pinna for the final coding exercise, focusing on practicing and getting familiar with Pinna. He also demonstrates defining the store, moving the state to the store, and organizing the code within the store.

Preview
Close

Transcript from the "WeekStore with Pinia Exercise" Lesson

[00:00:00]
>> Ben Hong: For your final coding exercise, we're gona do a WeekStore with Pinia. I recommend doing it doing the setup way just because, just to get more opportunities to practice that and then kind of see how it feels. And then if you can, see if you can get it to show up inside of your dev tools and then play around with like.

[00:00:18]
And again you can even just stub out the data. You don't have to worry too much about like whether it like works with the entire app or not. The idea here is just you getting some time with Pinia and setup store. Okay, so we have the useWeek composable that we created together.

[00:00:45]
And so you can see here, it's funny when you're looking at these side by sides, let me open up the use tasks or task store. That's what it is. If you look at them, they're actually not so different. It's kind of interesting. And so the main thing being that by opting into this defined store helper, there's a bunch of stuff that Pinion will do for you.

[00:01:13]
But from a structured perspective, we're actually fairly, fairly close there. So basically, what I would do here is we would say, all right, so export const useWeekStore, right, and we'll define the store. And I usually basically just call the key whatever the store name is, just to be consistent and then we open it up with set function.

[00:01:38]
So I'm just going to go ahead and do it like that and then I'll close this now just to give us our, our space back. And then let's just make sure we go back down here to make sure we get it right. Although something looks funny. Bum, bum, bum, that's good.

[00:01:56]
Const, async, okay, that's good for the return. This is all the way up here, yep, yep, yep. Okay, got it. So let me permanently comment this out so that is not confusing. But you all still have it. Okay, now this part is good. This part is not. Yes, good.

[00:02:22]
And then, okay, we need to import, define store from Pinia, which is great. There we have it. And then as you can see, we already have our actions in our getter. So really what we need is just the state and the state is all of the things we see here.

[00:02:39]
So we can just grab this, I mean, it's gonna break a ton of things, cuz we know what happened last time I did this, but this is a start. So here's our weeks exposed and Then everything else here. And so this is where at this point I'm just not even going to bother with the read only pattern because we are in a store now and I personally, I'm not so convinced that we need that.

[00:03:05]
So there we go. Shared state. This is it. And then, yep, that's the store. And then, I think, we actually don't even need this anymore, right, yeah, we don't. Yep. So then this here then gets moved all the way down into stores. Okay. And then we call it weak store.

[00:03:30]
Okay. And now I think there's going to be a bunch of stuff that's going to ultimately end up breaking because this does not work the way we want it to. But we're not going to worry about that just for the moment. We're just going to ask any questions about sort of that convergence.

[00:03:48]
Does anyone have any issues with that migration path? Felt overall familiar, given what we've been doing? Good, that's a good sign for me cuz it felt different than, yeah. I mean that I think when Eduardo was doing the design spec for Pinia or essentially what is Vue X5, it was this idea that composition API already just has that light flexibility that clearly a lot of people have gravitated towards and we really didn't want to step that far away from it.

[00:04:18]
There is no point designing a whole new API just because of the State management library. And yeah, so with that, that is your useWeekStore. And let's see, is there anything else I had us do, composing stores, Pinia dev tools, I think that's mostly that. As the final result, there will be a branch that's called solution.

[00:04:41]
And I'll basically make sure everything is at least talking to each other correctly. And that way, we can see how it all works together in the end. But again, I wanted to kind of create really a playground for you all. I mean, this is what it's like working in, honestly, some code bases, right?

[00:04:56]
Stuff's broken, stuff's weirdly dependent. There's some weird things are written, some funny ways. So how we make sense of that over time and organize. Sorry, make order out of chaos, not the other way around. Yeah, I mean that's really what we're trying to do as developers. So yeah, there'll be some.

[00:05:16]
And I'll make sure it's indicated on the repo, whatever. I probably would just call it solution, all right.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Start a 5-Day Free Trial