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.
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!
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.
@@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.
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
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?
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
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?
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.
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)
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 :)
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)))
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!
