ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- With Pinia being the new recommended data store solution for Vue, here are some of the essentials you need to know about it!
LINKS
pinia.vuejs.org/
✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
Music by Lukrembo
this guy deserves a lot more credit for these videos, really well presented quality content
who are you calling out for not giving enough credit?
you are confusing me :-(
@@itskittyme probably me. 😞 So I will give more credit: It's not only well presented quality content, it's also very bloat- and noise-free, it gets so to the point very quickly, it's like tutorial.zip. Or better, tutorial.7z.
Best course design! No typing, just inserted whole words!
Great little introduction! When already working with Typescript in an app, do you think there really is a need for Vuex or Pinia over using just the composition API with refs? Are the devtools and Hot module replacement the only real upside of Pinia?
in addition to the better typescript support mentioned, there's also some security issues regarding SSR and just exposing a reactive object in your app. the Pinia docs do a great job explaining the benefits of Pinia over the Composition API pinia.vuejs.org/introduction.html#why-should-i-use-pinia
You _can_ make a module behave as a global store by putting reactive values into it and importing it all over your app. However, this tightly couples this module to everything, making it very difficult to mock and test things in isolation. The next logical step would be to turn your module into a provider/inject pattern (eg: useStore) for better isolation and testability, but if you're doing that you might as well just use Pinya at that point since it already works that way and has its own docs, is well tested, devtools support, HMR and SSR support, etc.
@@soviut303 awesome! Thanks for that breakdown!
I use the pure composition API with refs and provide/inject, everything works great and is clean.
@@JETLAI123 It definitely works but Pinya is doing the same thing and is fully documented and fully tested (plus HMR, SSR and Devtools support). Rolling your own solution is fine if you're the only one who has to maintain the code, but it will just wind up being more technical debt to maintain if you're on a team.
Thank you for sharing the destructing issue. I'm using Pinia in my current project and didn't notice that was the issue with some of the bugs I've seen. Great intro video :D
The main problem Redux solved is not creating shakable/splittable global state, but to make it predictable. It looks like Pinia will lead to more spaghetti code with various components updating various stores.
I have never learned this much in such a short time. Thank you so much!!!
thanks for the tutorial! makes me wrap my head around pinia even more, as i have grown to get used to vuex.
Glad to hear that!
I'd like to see a comparison or justification for using Pinia vs just implementing a store with ref(), computed(), and ()=>{} functions. I recently stripped out vuex from a mid-sized app when I moved to the composition API and found the built-in reactivity features much easier to deal with. No mental mapping of getters, etc. and it's easy to break up code into any arbitrary modules. "Getters" are just computed values on the store. "Actions" are just arrow functions that manipulate the store...or perform any other operations like hitting an API and conditionally modifying the store. specific getters and actions can be imported where they're needed. But again, the best part (for me) is that the store uses the same code patterns used everywhere else in the code base.
HA! nevermind. I just found the video on Vue State Management WITHOUT Vuex. :)
All important informations summarized in this video, really good work!
Great work, man. Short but to the point! Keep it up.
aye thank you!
This content is very informative, well-written, and succinct! Keep up the amazing work!
Appreciate it a ton - I will :)
would love to see example of using function syntax of pinia instead of object syntax
there's definitely more pinia videos coming soon!
I clicked on the video thinking, please don't make the typical _counter_ example
Nice intro and very well presented! Glad that I'm not the only one still watching King Of Queens :)
GREAT tutorial. Super straightforward. Thank you.
Have not been a fan of Vuex for a while, seen it get just as messy as Redux in the wild. In that Pinia seems to be a step towards Svelte-like stores (still more complicated though) I'd be curious to check it out.
you can define the store seen in the video like this
export const useCounterStore = defineStore("counter", () => {
const count = ref(0)
const doubleCount = computed(() => count * 2)
function increment(val = 1) { count.value += val }
async function waitAndAdd() {
setTimeout(() => count.value++, 2000)
}
return { count, doubleCount, increment, waitAndAdd }
})
it really is just a setup function, like in a component
Why would you make a function async but not use await anywhere? Wouldn’t it be the same as if you didn’t put async there?
I would have thought returning a promise and using set timeout to resolve that would make sense.
Not sure why you are saying this, my point was that using the async keyword is pointless in this case.
Finally a Pinia tutorial not in typescript!
Your code will be the same whether you use TS or JS.
@@danielegvi I agree so why use TS :D
@@ChristopherFranko So that the programmer who uses _your_ code won’t be lost
@@danielegvi I get it, I just loathe ts lol Feels like so much extra for so little return but I think its just because I havnt forced myself to stick with it and I generally work with like 1-5 people at max. And we document tf out of everything.
"This was Pinia in one hundred seconds, thanks for watching and I'll see you in the next one."
your explanation is very clear, thank you
Awesome content..
I've recently switched from Vuex to Pinia, so far so good..
Can I request for a Vue-Query video??
Thanks for this. Please can you create a video on how to consume APIs and make POST requests using the Pinia store with the Axios package ??
It will be great if you make a tutorial on using node shims in vitejs like global,buffer, process....
Wowww is a nice alternative to Vuex, but i think is very similar than vuex and now on Vue3 we have native way to share data between components and make persistent data with provide/inject
Yea id deff say that you dont always need this, and you could build persistent apps that didnt, but in cases that you dont want to use inject/provide pinia is a solid and imo easy to understand state management solution. Especially as explained in this video.
It's like zustand for vue. Great tool
Nice tutorial brother i just want to ask you wNice tutorialch software is easy and best to learn as DAW soft soft or abelton live. Pls reply as soon as you can
thanks for the info really helped alot. i rather learn about tNice tutorials than school
Since you asked, I would love to see a full-stack app using Vue3 + Pinia + Tailwind + Firebase :D
I don't know if I'll ever be onboard with tailwind.
Awesome video, nice work!
Can you make a video or article explaining in which situations we should use state management (like Pinia)?
Actually I fell very confused when use those things, always using only ref and reactive for a 'little' system management.
That would be good ! It is hard to find material about good practices on this topic.
Pinia is basically when you need global variables between route changes. You most likely won't need it for a site with just a single page
You just answered your own question. If you can use ref and reactive, then why the hell would you use a store? Stores work across the entire website, not just the current component.
@@sven_527 it's not about use reactive or store (pinia, vuex) for an system management, it's about WHEN.
the best video that I seen congratulations....
Thank you thank you :)
as far as I remember from Vuex, the states shouldn’t be changed directly, like store.count++. Am I wrong?
hi great video tho!!
do you know if in large projects should i have a module folder structure similar to vuex modules but those module folders inside in the stores root folder from pinia ??
i think it could be a lot of files inside just one folder in large projects at least
thanks ! :D
decided to try it out.
I'm so confused why setTimeout in async function is awaited without any nested promise resolve etc.
If someone can explain, I'd love that. But my best guess is that it actually doesn't need "async" keyword as it doesn't do anything other than delay mutation upon timeout resolves.
The quality of videos is second to none (not only in the Vue space)!
appreciate that a ton!
What font you use in the video. It is awesome. It is at 0:04 time.
So, it's similar to vuex, but you have to mess with imports instead of just doing $store.
Thank you so much for this... So Pinia = Vuex + Simplicity 😁😁😁
I will give pinia a try, any good resource for keeping the state in sync across multiple tabs / devices?
storing it in localStorage for multiple tabs/sessions or in a DB for storage across devices!
Love your videos! ❤
Good examples 👍
I have a problem I did most of that and state remains undefined , my Object is very very deep in the structure of the state , why ?
I need some help, I'm starting a new nuxt 3 project should I use pinia over the nuxt useState?
Thanks ,how we delete a store from pinia developer tools when routing to another page .
Can you do a tutorial using setup / composition api in pinia
Edit: Thanks 🙏🏾
Seems to me like just a wrapper to make data models for Vue 3 to be very similar to Vue 2 regarding to syntax
Sure wish tutorials like this would use TypeScript.
GR8 IDEA TYTY
Thank your for the great video!!
Serenity now!
Great tutorial as always. Thanks now and always😁
youre welcome! glad you like it
What IDE theme is that? It looks awesome
Dracula 🧛♂️
@@unknownguywholovespizza Thanks bestie
awesome, great tutorial !!!
Thanks Brother
Can we use it with Nuxtjs or Quasar? Thanks
yup! here's some info from the docs: pinia.vuejs.org/ssr/nuxt.html
Hi, great work!
idk if this is a stupid question but I wonder why we use data store like pinia when we can set reactive var on composition file globally with ref
Ok so i have never used neither vuex or pinia. But I am getting into using one because the advantages i think are first: Changes trace: You can see what is changing inside ur app and how is changing without using console.logs. Other thing is a clean and centralized way to organize your global data so is not cumbersome to access or import. Is all about keeping it standard and tracesable
@@fueledbycoffee583ah okay, that one make sense
It is to have standard and organization of the data flow, and be able to make tests of isolates parts of the app, and setting global in one file wont give you benefits like , the data flow of actions, state, getter, mutations (if vuex) , and to have all organized in my job the main project has 20 vuex submodules and in each modules the action file alone is 600 lines each, having that in ref with composition will be spaghetti code imposible to debug.
You did well man, thx you
thanks!
Great !!
Thanks !
wait you guys use store?
very helpfull thanks !
So it's react query for vue?
I dont really get how or why the store values are not reactive ... you mean if you mutate any state value that will not be reactive when you want to see it inside the component??? That is just awful if so ...
Nice video!
Your editing reminds me of fireship
You should be my maths teacher
Don't know. I still like vuex more. There could be some better typescript ide support tho.
Greate, thanks
perfect
How to create videos like you create?
Yes, finally! :D
haha i listen to everyone's comments! pinia is awesome
@@LearnVue there’s no doubt about both of those things :)
awesome❤❤
Who are the creators of pania?
👍
❤🔥❤🔥❤🔥❤🔥
Let's Gooooooooo
Nice video.
thanks for watching
Why do we need those kind of things? adding these kinds of extra logic that just means the design has some problems.
Szeretem a PINiÁT
great video
thanks!
if only you could provide start-up files
I noticed something, your editing and intro is similar to fireships
I use applepie instead of pinia
You know all i want to tell man)
seems like zustand
Nasty charge never said it did but ok
This is not how you use async
je suis un francais les gars car il y a la traduction en francais ceux qui sont francais mais qui ne comprend un tout petit peut la langue
vite please 🥺
would you be interested in Vite specific to Vue? or just more general Vite tutorials
@@LearnVue general vite and examples on how to do production grade deployments, how can you add vite to existing quasar projects etc
The voiceover is so monotone. Good content tho.
I don't think the additional benefits of Pinia over Vuex warrants a new store solution. I would rather Pinia doesn't exist. A lot of things should not be invented.
Hmm, not a massive fan of `this` referring to 'state' in the actions..
That is just more of that black magic everyone loves to hate.
You copied this tutorial from like 3 other videos, however yours does nothing to explain how to use it, you just quickly gloss over things you swiped from the other tutorials without going into any explanation
successful. TNice tutorials video has made tNice tutorials software SO simple to understand that I have full confidence I will be able to beco super efficient