Pinia Simplified

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

[@Tommy-and-Ray]

this guy deserves a lot more credit for these videos, really well presented quality content

[@itskittyme]

who are you calling out for not giving enough credit? you are confusing me :-(

[@niner8275]

@@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.

[@alexgunt8065]

Best course design! No typing, just inserted whole words!

[@isimvol]

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.

[@ricko13]

I clicked on the video thinking, please don't make the typical _counter_ example

[@nuqtamedia1294]

I have never learned this much in such a short time. Thank you so much!!!

[@Blazeking636]

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

[@cindrmon]

thanks for the tutorial! makes me wrap my head around pinia even more, as i have grown to get used to vuex.

[@LearnVue]

Glad to hear that!

[@happynewyearw]

would love to see example of using function syntax of pinia instead of object syntax

[@LearnVue]

there's definitely more pinia videos coming soon!

[@jftalarico]

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.

[@jftalarico]

HA! nevermind. I just found the video on Vue State Management WITHOUT Vuex. :)

[@milos018]

Great work, man. Short but to the point! Keep it up.

[@LearnVue]

aye thank you!

[@samuelslivos4054]

All important informations summarized in this video, really good work!

[@B1GTM4N]

This content is very informative, well-written, and succinct! Keep up the amazing work!

[@LearnVue]

Appreciate it a ton - I will :)

[@LovelyAndyy]

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?

[@LearnVue]

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

[@soviut303]

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.

[@andykarwoski761]

@@soviut303 awesome! Thanks for that breakdown!

[@JETLAI123]

I use the pure composition API with refs and provide/inject, everything works great and is clean.

[@soviut303]

@@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.

[@davidbeljan]

Nice intro and very well presented! Glad that I'm not the only one still watching King Of Queens :)

[@Al-Misanthropic-Bundy]

Finally a Pinia tutorial not in typescript!

[@danielegvi]

Your code will be the same whether you use TS or JS.

[@ChristopherFranko]

@@danielegvi I agree so why use TS :D

[@danielegvi]

@@ChristopherFranko So that the programmer who uses _your_ code won’t be lost

[@ChristopherFranko]

@@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.

[@guillermomazzari4983]

Since you asked, I would love to see a full-stack app using Vue3 + Pinia + Tailwind + Firebase :D

[@zeppelin0110]

GREAT tutorial. Super straightforward. Thank you.

[@abdillahsyafiq]

your explanation is very clear, thank you

[@zzing]

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.

[@zzing]

Not sure why you are saying this, my point was that using the async keyword is pointless in this case.

[@torazis3286]

"This was Pinia in one hundred seconds, thanks for watching and I'll see you in the next one."

[@dennissam1387]

It will be great if you make a tutorial on using node shims in vitejs like global,buffer, process....

[@baka_baca]

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.

[@notkamui9749]

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

[@flaviusneagos597]

thanks for the info really helped alot. i rather learn about tNice tutorials than school

[@rafaelsaboia910]

the best video that I seen congratulations....

[@LearnVue]

Thank you thank you :)

[@njitaarnaud]

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 ??

[@VictorZamanian]

Sure wish tutorials like this would use TypeScript.

[@krtirtho]

It's like zustand for vue. Great tool

[@jit-r5b]

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.

[@FelipeMSV]

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

[@ChristopherFranko]

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.

[@anorebel1816]

Awesome content.. I've recently switched from Vuex to Pinia, so far so good.. Can I request for a Vue-Query video??

[@shakhbozkhudoyberdiev3661]

decided to try it out.

[@jaqb_007]

Good examples 👍

[@Wreighn]

So, it's similar to vuex, but you have to mess with imports instead of just doing $store.

[@mimachakata]

Can you do a tutorial using setup / composition api in pinia Edit: Thanks 🙏🏾

[@matanon8454]

Love your videos! ❤

[@khaledoghli3400]

Thanks ,how we delete a store from pinia developer tools when routing to another page .

[@caiovinicius7871]

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.

[@Jorgeee]

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

[@svenyboyyt2304]

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.

[@caiovinicius7871]

@@svenyboyyt2304 it's not about use reactive or store (pinia, vuex) for an system management, it's about WHEN.

[@iedi3]

as far as I remember from Vuex, the states shouldn’t be changed directly, like store.count++. Am I wrong?

[@mackenro1512]

GR8 IDEA TYTY

[@sanusivictorolajuwon514]

Great tutorial as always. Thanks now and always😁

[@LearnVue]

youre welcome! glad you like it

[@Nomunkh69]

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

[@pstoa]

The quality of videos is second to none (not only in the Vue space)!

[@LearnVue]

appreciate that a ton!

[@borisrosedeveloppeurweb]

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 ?

[@vistauz]

What font you use in the video. It is awesome. It is at 0:04 time.

[@minhquang7610]

Thank your for the great video!!

[@kevinvishal9071]

Thank you so much for this... So Pinia = Vuex + Simplicity 😁😁😁

[@mentalites]

Thanks Brother

[@alherrera9390]

Seems to me like just a wrapper to make data models for Vue 3 to be very similar to Vue 2 regarding to syntax

[@rz7510]

awesome, great tutorial !!!

[@marianofpv]

Serenity now!

[@roboticol6280]

Your editing reminds me of fireship

[@tech6841]

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

[@saptarshisengupta5073]

So it's react query for vue?

[@ricardocastanho4717]

Nice video!

[@clemensb7123]

I use applepie instead of pinia

[@barbieroalex]

I need some help, I'm starting a new nuxt 3 project should I use pinia over the nuxt useState?

[@ahmadal-noufi4331]

You should be my maths teacher

[@burloiumarian2665]

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 ...

[@jntaca]

Great !! Thanks !

[@ayasharamadhan4441]

You did well man, thx you

[@LearnVue]

thanks!

[@upsylondeveloppement8837]

very helpfull thanks !

[@marvenwilsonsdonque1568]

wait you guys use store?

[@waelgh4307]

Greate, thanks

[@mahdimousavi3470]

perfect

[@timkilian7140]

Don't know. I still like vuex more. There could be some better typescript ide support tho.

[@rifki0011]

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

[@fueledbycoffee583]

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

[@rifki0011]

@@fueledbycoffee583ah okay, that one make sense

[@luisrogelio98]

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.

[@AndreasBeder]

I will give pinia a try, any good resource for keeping the state in sync across multiple tabs / devices?

[@LearnVue]

storing it in localStorage for multiple tabs/sessions or in a DB for storage across devices!

[@hanzladev]

How to create videos like you create?

[@RodrigoDAgostino]

Yes, finally! :D

[@LearnVue]

haha i listen to everyone's comments! pinia is awesome

[@RodrigoDAgostino]

@@LearnVue there’s no doubt about both of those things :)

[@dragon3602010]

Can we use it with Nuxtjs or Quasar? Thanks

[@LearnVue]

yup! here's some info from the docs: pinia.vuejs.org/ssr/nuxt.html

[@DanielTames]

awesome❤❤

[@GGdevelopment]

Who are the creators of pania?

[@ericjunior105]

Let's Gooooooooo

[@user-dz7ez2hn9z]

if only you could provide start-up files

[@DoDMayor]

Szeretem a PINiÁT

[@butterfly7562]

seems like zustand

[@SquareIsNotCool]

What IDE theme is that? It looks awesome

[@thecoolnewsguy]

Dracula 🧛‍♂️

[@SquareIsNotCool]

@@thecoolnewsguy Thanks bestie

[@kwesikwaa]

great video

[@LearnVue]

thanks!

[@Lucas-mu5no]

Nice video.

[@LearnVue]

thanks for watching

[@zhonghuawang4155]

Why do we need those kind of things? adding these kinds of extra logic that just means the design has some problems.

[@riyad-appscode]

❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@trplnr]

I noticed something, your editing and intro is similar to fireships

[@SuperRoqsta]

You know all i want to tell man)

[@dmitriykret8938]

👍

[@dustinRo]

Nasty charge never said it did but ok

[@moustaphagaye7978]

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

[@FrederickAlvarez_]

vite please 🥺

[@LearnVue]

would you be interested in Vite specific to Vue? or just more general Vite tutorials

[@FrederickAlvarez_]

@@LearnVue general vite and examples on how to do production grade deployments, how can you add vite to existing quasar projects etc

[@Rundik]

This is not how you use async

[@edrivenstudioslevar]

The voiceover is so monotone. Good content tho.

[@xushenxin]

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.

[@ColinRichardson]

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.

[@dixienormis3614]

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

[@CHUCh4N]

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