Singleton Data Store

[00:00:00]
>> Ben Hong: The conscious of this is, as I mentioned before, which is a factory. So again, if you think of singleton, it's like they're unique, they're single. Factory, think your large manufacturing plant, right? They're like churning stuff out. That's what the functions do, they churn out a new set of state that will be used upon every instantiation.

[00:00:17]
So in other words, factories are not great when you want to share state, because they're all going to be unique, they're going to be separate states. If that's what you want, that's great. But in the event you're trying to share it, that's where the problem lies. So has everyone here used some sort of state management before?

[00:00:30]
Probably, yeah, looks like it. And so for those who are new to this pattern, the datastore pattern basically assumes that you have a singleton that you're sharing at the top. So actually, let me go to. I guess I'll have to use weeks in this one and we'll flip the task and usually I use tasks and then do weeks.

[00:00:47]
But since this is already set up, the idea here is you have something that's shared like the singleton here, and then you have functions that then modify it. So in other words, if we go ahead and say I think we had like a fetch. Let's see, this is a response fetch.

[00:01:06]
Gosh, let's see, weak form model. Maybe this will be fine. This is a post. Nope, I don't want to put. Nope, fetch, here you go, weeks. Okay, good enough. And so here for example. This fetchweeks function. Let's take the whole thing. Okay, so inside of here we now have this method.

[00:01:32]
I generally like to label my things function just to kind of separate them from the variables. Something I like to do. So we have this async function function for fetching the weeks. For now we are. I guess we need these other pieces. But one moment, we need to then grab those pieces of state here.

[00:01:55]
So we'll grab those like as such and we'll export them as well. And then so these are your actions because they impact state. So they're there. I need the API base URL. What is that? There it is. Okay, and then we drop that. Let's say that's a constant.

[00:02:23]
So, let's just throw that at the top and then that's being shared, great. And then fetch Weeks. Fetch. Yep, this is good. That looks like no errors. Okay, perfect. And so, usually what happens then is, so you have this action for being able to fetchweeks and so you can Imagine here, okay, this is the factory one.

[00:02:49]
If we have a getter say number of weeks then you would say export const number of weeks equals computed and then we go ahead and return weeks value length. And so here we see we're kind of starting to shape up into store a little bit. And so, then the datastore model then basically purports that from what you would do here is because right now everything is just kind of being shared together.

[00:03:22]
You wanna be able to instantiate things is kind of the idea. So, you would actually export a function called like use. In this case weakStore. And what it do is again, you keep your singleton out here, but inside of this you basically share this stuff. So your actions and your getters as such.

[00:03:51]
So, return, what did I say? Weeks, Number of weeks. Yep, numberOfWeeks. And then I said fetchweeks. Yep, and so this would technically be your getters, this is your actions and then what you could do. And this is another technique. There is a helper function from view that's called read only.

[00:04:15]
And the read only is helpful because when you expose your refs directly there is a chance that a developer is going to get sloppy and they're going to try to mute mutate something. So in this case rather than having them hit this directly, what you would do is you would actually prevent this from being exported so that they can't directly impact your source of truth.

[00:04:34]
And then you would basically say inside of here weeks is read only weeks. And then I think it was like is loading. I think what were the other two week is loading weak error, weakIs Loading, readonly, slow only read weakError, readonly (weakError). Okay, and then comma. And how would this work?

[00:05:09]
Well, now that we have this, let's see, there are probably some things breaking now. So let's find out what's breaking. Do do do. Yep. So has no idea what this weeks is. So, we can do then as we say, okay, we're gonna import use what I call weekStore from composable use week and then I will go ahead and initialize it, and I'll say, const weekStore = useWeekStore.

[00:05:39]
And then you'll see here there's a bunch of stuff basically ready for us to access. And so, from here weekStore.weeks now works, WeekStore.weeks and up weekStore.fetchweeks. I think that's everything. Okay. And then if I look at the taskform model now, I killed the server. Okay, Failed with one error.

[00:06:22]
What did I do wrong? I know I did wrong. You can put multiple exports inside of an export. So, meaning use week here. I left the keyword in there, unfortunately. So there you go. That should do it. And then. Yes. Back here. Back here. Two tasks. It's yelling at me.

[00:06:52]
Why is it yelling? Use week does not find an export name weeks. So that means somewhere else it's using it, right? Import weeks, yeah, okay. Yep, you're totally right. Okay, that's. That's the problem. Okay, let's. Okay, we're gonna. We're gonna be. We're gonna be diligent about this. UseWeekStore, you're right.

[00:07:13]
And then although this is already. I see repetition there for sure. Fetch weeks is definitely being repeated here. Weekstore.weeks. WeekStore, weekStore. Although I did not initialize it yet. So this is why it's still erroring out. So we can go ahead. Don't need this anymore. Yep. Const weekStore = useWeakStore.

[00:07:47]
All right, now this should be healthier. Good call out. Thank you for that. Weeks. Yep. Great. And that is. That's everything. Okay. All right, I have to do it for the rest. Okay, I can do that during the exercise. But what I do wanted to. Okay, does this part.

[00:08:26]
So to exactly your point, there is kind of a factory going on in the sense that you're instantiating the store that can then fetch you the getters, the actions that are associated with it. But at the end of the day, what is ultimately being shared, despite it being a factory pattern, because you're using a function here, is that you have this shared state at this top that remains a shared singleton.

[00:08:56]
Does that make sense? Okay, so in other words, these two are not mutually exclusive. This is one example of how you can combine them in such a way that allows you to then leverage the advantages of both. Now granted, the read only thing here is like. This is like call it a convention of some people just really like having read only values in their state stores.

[00:09:19]
Honestly, typically I haven't really had an issue just like having the state directly accessible on my own. But to each their own. And sometimes you need more guardrails for different teams. So I wanted to make sure you knew about the use only pattern. Sorry, the read only pattern so that it was not be, it would not throw you off so much.

[00:09:39]
So basically what you'll notice is let me show you the error and why we're going to do a little bit of a hybrid approach to this. You'll see here that weeks.value is being set to fetchweeks, right, there's clearly some logic here that's trying to update set value. If we look at our useweek composable right now, really the only action we have is to fetch a week.

[00:10:02]
We don't actually have an update weeks functionality yet in terms of if someone's just trying to check chugged some data in. And so again, we could obviously architect that and make that very clean. But again, I want to make use of everyone's time here. I'm just going to export this back out and then that should.

[00:10:22]
And so to be very clear for the record, that defeats the purpose of the read only in the factory, but it should solve the problem otherwise. So this way I don't need to do that and just have weeks exported directly. And that actually should. Yeah. Reset everything. Yep.