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
@lighty262
2 жыл бұрын
Thanks erik, I was actually searching docs for pinia and vue 3 a moment ago and then youtube notification for this video pops up.
@cooltune
2 жыл бұрын
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.
@OzoneGrif
2 жыл бұрын
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.
@krckyboy
2 жыл бұрын
What issues were you facing exactly?
@Pizzaguy2
2 жыл бұрын
@@krckyboy As of Vue 3.0, the getter's result is not cached as the computed property does.
@krckyboy
2 жыл бұрын
@@Pizzaguy2 Any interesting methods you use for monitoring caching functionality?
@Markeldo
2 жыл бұрын
Thank you very much for storeToRefs... I was struggled with loosing reactivity all the evening before I found your video
@___Kevin
2 жыл бұрын
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
@ColinRichardson
2 жыл бұрын
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?
@pavelarseyev452
Жыл бұрын
I've noticed it too...I think the author just didn't want us to know he makes mistakes too :)
@adrienbenaceur4805
2 жыл бұрын
Great Video Thank YOU !
@garikaib
2 жыл бұрын
This was enough to get me started. Thanks for the intro.
@hosseinsamani348
2 жыл бұрын
problem solver !! thanks man
@JosepMonjo
2 жыл бұрын
I don't know if they figure it out yet, but it lacked a persistence plugin
@___Kevin
2 жыл бұрын
I combined Pinia + localStorage to get around this issue (not necessarily the proper use and hacky but it get the job done)
@Anaxarchos
2 жыл бұрын
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.
@ChrisDermody
2 жыл бұрын
Great video, will be using it in my net project 👍
@andreykachur3827
2 жыл бұрын
Спасибо Erik!
@RianY2K
2 жыл бұрын
thank you Erik, this is useful tutorial, for understanding Pinia
@jenstornell
2 жыл бұрын
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?
@alexanderkim7241
2 жыл бұрын
OR could be not, anyway, just migrate to Pinia, its better right now
@garikaib
2 жыл бұрын
Evan says this is Vuex 5. It will be more of a replacement.
@jenstornell
2 жыл бұрын
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!
@sikinski1588
2 жыл бұрын
Thank you for this video!
@tuser1750
2 жыл бұрын
Great tutorial! I only have one question. Why do you keep toggling the keyboard INSERT mode?
@umitcanhan
2 жыл бұрын
Thanks for the tutorial, it was very educational content :)
@nobodyz2700
2 жыл бұрын
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 :(
@sania3631
2 жыл бұрын
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.
@SanderCokart
Жыл бұрын
How many stores at once is too many for performance, what are JS memory limits ect. How Scalable is it
@groovbox
2 жыл бұрын
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
@badasscoder4481
2 жыл бұрын
thank you so much erik
@arminmatthes
Жыл бұрын
Seemed to me like $reset was way slower than using the prewritten reset action. Why?
@icarofreitas6523
2 жыл бұрын
Thanks
@LeoLopezTek
Жыл бұрын
Pinia is a real pain in the ***. We had 0 problems with Vuex when Pinia can't properly persist a state...
@echotronicsng
2 жыл бұрын
thanks for another great tutorial
@cliffordusidamen6622
2 жыл бұрын
Simplified. Thanks.
@rahimeinollahi1
2 жыл бұрын
I, Who learned vuex before, Now have to go learn pinia again😭😭😭
@expresstutorial3255
2 жыл бұрын
if you counter = 10 " main.$reset() " will go to get default value, declared into the store...
@grigodoes
2 жыл бұрын
I don't have syntax highlighting when I use SETUP, what could be the problem? Help pls
@tech6841
2 жыл бұрын
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 !
@samuelnmeje
2 жыл бұрын
i use reactive as a store. and it works fine. its been serving so far
@ProgramWithErik
2 жыл бұрын
That works too!
@samuelnmeje
2 жыл бұрын
@@ProgramWithErik are their situations it won't serve. I have been told it's bad practice. Thanks for your reply
@blank4157
2 жыл бұрын
@@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.
@ChristopherFranko
2 жыл бұрын
can you do one of these but use js instead of ts? me love u long time
@GintsPolis
2 жыл бұрын
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?
@dumpling6440
Жыл бұрын
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
@jahongirbektemirov6516
Жыл бұрын
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?
@kwesikwaa
2 жыл бұрын
this is actually cool. once again state management isnt really a headache in vue. Thanks for sharing
@MrStraightGangsta
2 жыл бұрын
Said no one ever
@bennievaneeden2720
2 жыл бұрын
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.
@AndrewRusinas
2 жыл бұрын
What keyboard do you use? The sound is nice :3
@francm_1
2 жыл бұрын
Theme Color name please?
@NikosKatsikanis
2 жыл бұрын
nice vid
@josecontreras2258
2 жыл бұрын
Does someone know the name of the color theme he uses?
@surajkohli959
2 жыл бұрын
Thanks, really useful video! Is there any way to see the actions in vue dev tool for Pinia with Vue 3?
@jonwinder6622
2 жыл бұрын
ya
@omiddellcash522
2 жыл бұрын
explain "Harlem" too.
@ukaszzbrozek6470
2 жыл бұрын
I thought that in Vue 3 you need to wrap code n special method .
@ronnynestares3831
2 жыл бұрын
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?
@ProgramWithErik
2 жыл бұрын
Yes, I think soo...
@grosso4733
2 жыл бұрын
Do you know if with Pinia if you make a counter store, can you make create two isolated counter instances?
@OzoneGrif
2 жыл бұрын
You can by using defineStore multiple times and with different Ids; just reuse the store configuration.
@duczbeatrix975
2 жыл бұрын
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.
@squigglyspaghetti8690
2 жыл бұрын
Hey, I just learned this exact thing today. Hope this helps: kzitem.info/news/bejne/mq2ezZ-gsaF0gHo
@davidemmanuel5057
2 жыл бұрын
hello, do you recommend this for a shopping cart?
@peze_yt
2 жыл бұрын
I make a shopping cart with Pinia seeying a Vuex Tutorial and Pinia have about 20 line less of code
@mikehurtado4772
2 жыл бұрын
Work in a boot file?
@ciemniakjez
2 жыл бұрын
Dr Who :]
@jingzheshan
2 жыл бұрын
No need for it. Just use inject and provide 😂😂
@tnorthern
2 жыл бұрын
Kind of irrelevant to everything but your getter is missing a return
@TheRvh70
2 жыл бұрын
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)
@eizen8774
2 жыл бұрын
@@TheRvh70 Nope. Return is not implied because he used curly braces.
@brandonlange2260
2 жыл бұрын
@@eizen8774 thank goodness someone else noticed this, I was dying
@sidjo6191
2 жыл бұрын
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)))
@user-zn5ky3fw5h
2 жыл бұрын
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.
@user-zn5ky3fw5h
2 жыл бұрын
@@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.
@ДмитрийКарпич
2 жыл бұрын
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 :)
@rajikkali2381
2 жыл бұрын
Meh, I like Vuex
@timercadoindustrialmi
2 жыл бұрын
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!
@ProgramWithErik
2 жыл бұрын
Could you try downloading the sample project and see the differences?
Пікірлер: 84