I love how I am working as a software engineer and still always have to refer to videos like this to save myself lol. This guy is so good at explaining
Aw yes I bumped into pinia when I was looking for a state management lib because vuex for vue 3 wasn't ready yet.... but I soon realised ES module based programming and vue3 Refs + computedRefs provide you with all the necessary tools to do state management without any libraries and thus dependencies at all. Still though, good vid.
We're switching our app to script setup following your video, and I also wanted to switch from VueX to Pinia (we have major issues with VueX client-side), and that video is definitely useful for this! Thanks.
I'm the like number 777! More seriously thank you Erik for your explications it solved the issue I had with vuex. I really liked the intuitive approach of Pinia
There seemed to have been a booboo.. but it still works? 5:03 doubleCount is created without a return statement within the brackets. 6:58 you can clearly see that doubleCount is a property that returns void. (Which is correct from the code from 5:03) 12:35 it is still in its broken logic but then at 15:04 it just magically returns a number, and works.. Was there some Off-Camera fixing of the code? or is there some Magic Non-Standard JS logic going on?
Thanx for this great intro to Pinia. There is one thing which I do not get: When I use a Pinia store in a component it works fine and the data is reactive, but when I use it in a router.js following the conventions from Pinia (as described on the website) I get the store, but the data is not reactive.
@@samuelnmeje it's not a bad practice, however state management solutions like Vuex, Pinia etc would be more suitable as your application grows as these solutions offer more features compared to plain ref/reactive. This includes more comprehensive devtools support and rich plugins ecosystem.
Pinia is great but there is one problem. When using it in vue2 & nuxt2 alongside with vuex (because some modules in nuxt2 require working vuex) it bugs out in vue devtools. It results in vuex modules showing properly on the devtools but unfortunately pinia modules do not show up there. There are names of modules but without showing the state. I love pinia and I am using it but this bug makes my life harder :(
Stick with Vuex exclusively unless you will be using Vue3/Nuxt 3. Remember that the whole idea behind state management is to have a 'single source of truth'. Having two different sources makes no sense and dangerous if your project is serious.
How to make deep copy of pinia ref state but reactive and that state will be an array of objects. I tried still idk how does it make changes without calling. I used js deepcopy logic
Hi Erik, I like this video, just saw that pinia has been accepted as recommended state management package. Hovever I have all my code using the old way export default{ components:{}, data(){}, methods:{}} approach, and I can't seem to find info on the net about how to rewrite my code this way, const, etc and there is the export default {setup() {const someStore = useSomeStore()}} code format in pinia docs page. I am confused. Please help.
It took me a while but I've now accepted that Pinia is the new Vuex 5. It's confirmed by Evan You. It's on Twitter and in a conference video. He says it's mainly a naming/branding issue left to solve. In conclusion, use Pinia. Thanks!
I got rather stupid question. If I need to store just API token. Should I use state managment? Why I can just use public variable imported from module?
Español Inglés buenas saben si el suscribirse para detectar cuando expira haga denuevo el pedido del token y guardarlo en el localstore estaría bien ? good do you know if subscribing to detect when it expires, make the request for the token again and save it in the localstore would be fine?
we're going to have to have an intervention about EVERY single tutorial using the same counter store example.. there are other, much more useful and practical examples guys, like has anyone ever actually used an entire store for only a counter
So with the arrow function the return implied right? note how he doesnt have round brackets around the "return", just curly braces. If the content in the curly braces returns something, this is valid code (and actually really clean if you ask me)
Vue and the entire ecosystem of stores Vue routing, this is a miserable semblance of a reaction. They are trying to add some symbols and conventions. Vue wants to be like a reaction with his pseudo-components and shops, and because of this it turns into vomiting with many agreements that lose the advantages of the framework (knowledge of the project) Their tools work well only with counter)))
Don't get any idea why do u actually need some state managers in vue3. With all this reactive/computed/watch you can avoid using any sort of libraries in your project just move all global reusable staff in a distinct file and export it where u need it. It's just lmao.
In my opinion, the developer must follow a simple idea - "One tool for one job". This clever practice is clear to you, to me, to everyone around. So, yes, you may use a "no-state" case, or other sophisticated things, but any other developer cam to project and say "WTF? uh, I want to say how interesting, but why?!". Or maybe it will be your phrase two years later :)
Hello, I'm having problems trying to install Pinia in a new vue 3 project. I selected the options you mentioned in the video but this is the error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: pinia@2.0.6 npm ERR! Found: typescript@4.1.6 npm ERR! node_modules/typescript npm ERR! peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0 npm ERR! node_modules/@typescript-eslint/eslint-plugin/node_modules/tsutils npm ERR! tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@4.33.0 npm ERR! node_modules/@typescript-eslint/eslint-plugin npm ERR! peer @typescript-eslint/eslint-plugin@"^4.4.0" from @vue/eslint-config-typescript@7.0.0 npm ERR! node_modules/@vue/eslint-config-typescript npm ERR! dev @vue/eslint-config-typescript@"^7.0.0" from the root project npm ERR! 1 more (the root project) npm ERR! peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0 npm ERR! node_modules/@typescript-eslint/typescript-estree/node_modules/tsutils npm ERR! tsutils@"^3.21.0" from @typescript-eslint/typescript-estree@4.33.0 npm ERR! node_modules/@typescript-eslint/typescript-estree npm ERR! @typescript-eslint/typescript-estree@"4.33.0" from @typescript-eslint/experimental-utils@4.33.0 npm ERR! node_modules/@typescript-eslint/experimental-utils npm ERR! @typescript-eslint/experimental-utils@"4.33.0" from @typescript-eslint/eslint-plugin@4.33.0 npm ERR! node_modules/@typescript-eslint/eslint-plugin npm ERR! 1 more (@typescript-eslint/parser) npm ERR! 5 more (@vue/cli-plugin-typescript, ts-loader, tslint, tsutils, the root project) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional typescript@">=4.4.4" from pinia@2.0.6 npm ERR! node_modules/pinia npm ERR! pinia@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: typescript@4.5.3 npm ERR! node_modules/typescript npm ERR! peerOptional typescript@">=4.4.4" from pinia@2.0.6 npm ERR! node_modules/pinia npm ERR! pinia@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\admin\AppData\Local pm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\admin\AppData\Local pm-cache\_logs\2021-12-10T22_22_18_020Z-debug.log Any advice about it? Thanks!
I love how I am working as a software engineer and still always have to refer to videos like this to save myself lol. This guy is so good at explaining
Thanks erik, I was actually searching docs for pinia and vue 3 a moment ago and then youtube notification for this video pops up.
Aw yes I bumped into pinia when I was looking for a state management lib because vuex for vue 3 wasn't ready yet.... but I soon realised ES module based programming and vue3 Refs + computedRefs provide you with all the necessary tools to do state management without any libraries and thus dependencies at all. Still though, good vid.
We're switching our app to script setup following your video, and I also wanted to switch from VueX to Pinia (we have major issues with VueX client-side), and that video is definitely useful for this! Thanks.
What issues were you facing exactly?
@@krckyboy As of Vue 3.0, the getter's result is not cached as the computed property does.
@@Pizzaguy2 Any interesting methods you use for monitoring caching functionality?
Thank you very much for storeToRefs... I was struggled with loosing reactivity all the evening before I found your video
I'm the like number 777! More seriously thank you Erik for your explications it solved the issue I had with vuex. I really liked the intuitive approach of Pinia
There seemed to have been a booboo.. but it still works?
5:03 doubleCount is created without a return statement within the brackets.
6:58 you can clearly see that doubleCount is a property that returns void. (Which is correct from the code from 5:03)
12:35 it is still in its broken logic
but then at 15:04 it just magically returns a number, and works..
Was there some Off-Camera fixing of the code? or is there some Magic Non-Standard JS logic going on?
I've noticed it too...I think the author just didn't want us to know he makes mistakes too :)
This was enough to get me started. Thanks for the intro.
Thank you for this video!
Спасибо Erik!
Great Video Thank YOU !
Great video, will be using it in my net project 👍
How many stores at once is too many for performance, what are JS memory limits ect. How Scalable is it
problem solver !! thanks man
Theme Color name please?
Great tutorial! I only have one question. Why do you keep toggling the keyboard INSERT mode?
thank you Erik, this is useful tutorial, for understanding Pinia
if we create a single root store and use it globally for all stores, for example for loading and errors. How we can do it?
Thanx for this great intro to Pinia.
There is one thing which I do not get: When I use a Pinia store in a component it works fine and the data is reactive, but when I use it in a router.js following the conventions from Pinia (as described on the website) I get the store, but the data is not reactive.
Hi great video tho!
Do you when or where do I need to create the store with a function instead of an object?
Thanks !
keep it up !
i use reactive as a store. and it works fine.
its been serving so far
That works too!
@@ProgramWithErik are their situations it won't serve. I have been told it's bad practice. Thanks for your reply
@@samuelnmeje it's not a bad practice, however state management solutions like Vuex, Pinia etc would be more suitable as your application grows as these solutions offer more features compared to plain ref/reactive. This includes more comprehensive devtools support and rich plugins ecosystem.
Does someone know the name of the color theme he uses?
Thanks for the tutorial, it was very educational content :)
Pinia is great but there is one problem. When using it in vue2 & nuxt2 alongside with vuex (because some modules in nuxt2 require working vuex) it bugs out in vue devtools. It results in vuex modules showing properly on the devtools but unfortunately pinia modules do not show up there. There are names of modules but without showing the state.
I love pinia and I am using it but this bug makes my life harder :(
Stick with Vuex exclusively unless you will be using Vue3/Nuxt 3. Remember that the whole idea behind state management is to have a 'single source of truth'. Having two different sources makes no sense and dangerous if your project is serious.
Thanks
How to make deep copy of pinia ref state but reactive and that state will be an array of objects. I tried still idk how does it make changes without calling.
I used js deepcopy logic
Thanks, really useful video! Is there any way to see the actions in vue dev tool for Pinia with Vue 3?
ya
thank you so much erik
I don't know if they figure it out yet, but it lacked a persistence plugin
I combined Pinia + localStorage to get around this issue (not necessarily the proper use and hacky but it get the job done)
I don't have syntax highlighting when I use SETUP, what could be the problem? Help pls
thanks for another great tutorial
Work in a boot file?
What keyboard do you use? The sound is nice :3
can you do one of these but use js instead of ts? me love u long time
Do you know if with Pinia if you make a counter store, can you make create two isolated counter instances?
You can by using defineStore multiple times and with different Ids; just reuse the store configuration.
hello, do you recommend this for a shopping cart?
I make a shopping cart with Pinia seeying a Vuex Tutorial and Pinia have about 20 line less of code
nice vid
Hi Erik,
I like this video, just saw that pinia has been accepted as recommended state management package. Hovever I have all my code using the old way export default{ components:{}, data(){}, methods:{}} approach, and I can't seem to find info on the net about how to rewrite my code this way, const, etc and there is the export default {setup() {const someStore = useSomeStore()}} code format in pinia docs page. I am confused. Please help.
Hey, I just learned this exact thing today. Hope this helps:
th-cam.com/video/9whgkjxoCME/w-d-xo.html
The author said it could be a part of new Vuex in the future. Maybe just stick with Vuex if this will be merged with Vuex anyway?
OR could be not, anyway, just migrate to Pinia, its better right now
Evan says this is Vuex 5. It will be more of a replacement.
It took me a while but I've now accepted that Pinia is the new Vuex 5. It's confirmed by Evan You. It's on Twitter and in a conference video. He says it's mainly a naming/branding issue left to solve. In conclusion, use Pinia. Thanks!
Simplified. Thanks.
Seemed to me like $reset was way slower than using the prewritten reset action. Why?
I got rather stupid question. If I need to store just API token. Should I use state managment? Why I can just use public variable imported from module?
this is actually cool. once again state management isnt really a headache in vue. Thanks for sharing
Said no one ever
Español
Inglés
buenas saben si el suscribirse para detectar cuando expira haga denuevo el pedido del token y guardarlo en el localstore estaría bien ?
good do you know if subscribing to detect when it expires, make the request for the token again and save it in the localstore would be fine?
Yes, I think soo...
we're going to have to have an intervention about EVERY single tutorial using the same counter store example.. there are other, much more useful and practical examples guys, like has anyone ever actually used an entire store for only a counter
explain "Harlem" too.
if you counter = 10 " main.$reset() " will go to get default value, declared into the store...
Pinia is a real pain in the ***. We had 0 problems with Vuex when Pinia can't properly persist a state...
I, Who learned vuex before, Now have to go learn pinia again😭😭😭
I don't really see the benefit in switching from Vuex. mutations are optional and you can modify state within actions if you so wished.
I thought that in Vue 3 you need to wrap code n special method .
Dr Who :]
Kind of irrelevant to everything but your getter is missing a return
So with the arrow function the return implied right? note how he doesnt have round brackets around the "return", just curly braces. If the content in the curly braces returns something, this is valid code (and actually really clean if you ask me)
@@TheRvh70 Nope. Return is not implied because he used curly braces.
@@eizen8774 thank goodness someone else noticed this, I was dying
Vue and the entire ecosystem of stores Vue routing, this is a miserable semblance of a reaction. They are trying to add some symbols and conventions. Vue wants to be like a reaction with his pseudo-components and shops, and because of this it turns into vomiting with many agreements that lose the advantages of the framework (knowledge of the project) Their tools work well only with counter)))
No need for it. Just use inject and provide 😂😂
Don't get any idea why do u actually need some state managers in vue3. With all this reactive/computed/watch you can avoid using any sort of libraries in your project just move all global reusable staff in a distinct file and export it where u need it. It's just lmao.
@@FS-yq9ef yep, nice point. Should think about it, cause i tried such no-state -manager approach only on a simple projects.
And yep, pinia is great.
In my opinion, the developer must follow a simple idea - "One tool for one job". This clever practice is clear to you, to me, to everyone around. So, yes, you may use a "no-state" case, or other sophisticated things, but any other developer cam to project and say "WTF? uh, I want to say how interesting, but why?!". Or maybe it will be your phrase two years later :)
Meh, I like Vuex
Hello, I'm having problems trying to install Pinia in a new vue 3 project. I selected the options you mentioned in the video but this is the error message:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: pinia@2.0.6
npm ERR! Found: typescript@4.1.6
npm ERR! node_modules/typescript
npm ERR! peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin/node_modules/tsutils
npm ERR! tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@4.33.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! peer @typescript-eslint/eslint-plugin@"^4.4.0" from @vue/eslint-config-typescript@7.0.0
npm ERR! node_modules/@vue/eslint-config-typescript
npm ERR! dev @vue/eslint-config-typescript@"^7.0.0" from the root project
npm ERR! 1 more (the root project)
npm ERR! peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR! node_modules/@typescript-eslint/typescript-estree/node_modules/tsutils
npm ERR! tsutils@"^3.21.0" from @typescript-eslint/typescript-estree@4.33.0
npm ERR! node_modules/@typescript-eslint/typescript-estree
npm ERR! @typescript-eslint/typescript-estree@"4.33.0" from @typescript-eslint/experimental-utils@4.33.0
npm ERR! node_modules/@typescript-eslint/experimental-utils
npm ERR! @typescript-eslint/experimental-utils@"4.33.0" from @typescript-eslint/eslint-plugin@4.33.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! 1 more (@typescript-eslint/parser)
npm ERR! 5 more (@vue/cli-plugin-typescript, ts-loader, tslint, tsutils, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@">=4.4.4" from pinia@2.0.6
npm ERR! node_modules/pinia
npm ERR! pinia@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@4.5.3
npm ERR! node_modules/typescript
npm ERR! peerOptional typescript@">=4.4.4" from pinia@2.0.6
npm ERR! node_modules/pinia
npm ERR! pinia@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\admin\AppData\Local
pm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Local
pm-cache\_logs\2021-12-10T22_22_18_020Z-debug.log
Any advice about it? Thanks!
Could you try downloading the sample project and see the differences?
Try: npm install pinia --legacy-peer-deps