Vue State Management Pinia Crash Course - Pinia Tutorial Vue.js 3
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- In this video we look at Pinia a light-weight state management system perfect for Vue 3 users looking to use the Composition API. In this video we create a counter example, and I give some tips on how to use it! #vue3 #pinia
👉Check out my last video on Nuxt 3!
• Why Use Nuxt JS 3 Beta...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 week course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bosd ! 💻
Begginer JavaScript - BeginnerJavaScript.com/friend...
React For Beginners - ReactForBeginners.com/friend/...
Advanced React - AdvancedReact.com/friend/HANC...
0:00 Introduction
0:29 Setting up and Installing Pinia
02:39 Creating a store
06:04 Import store into App
07:04 Introducing storeToRefs
10:15 using $patch
12:04 using $reset
13:00 using $subscribe
13:45 Vue Dev Tools with Pinia
14:30 Using $state
Links
github.com/posva/pinia
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.
This was enough to get me started. Thanks for the intro.
Thank you very much for storeToRefs... I was struggled with loosing reactivity all the evening before I found your video
thank you Erik, this is useful tutorial, for understanding Pinia
Great video, will be using it in my net project 👍
Thanks for the tutorial, it was very educational content :)
thank you so much erik
thanks for another great tutorial
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
Thank you for this video!
Great Video Thank YOU !
Simplified. Thanks.
problem solver !! thanks man
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?
Спасибо Erik!
Thanks
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 !
nice vid
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.
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 :)
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)
Thanks, really useful video! Is there any way to see the actions in vue dev tool for Pinia with Vue 3?
ya
Great tutorial! I only have one question. Why do you keep toggling the keyboard INSERT mode?
this is actually cool. once again state management isnt really a headache in vue. Thanks for sharing
Said no one ever
What keyboard do you use? The sound is nice :3
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
I, Who learned vuex before, Now have to go learn pinia again😭😭😭
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!
How many stores at once is too many for performance, what are JS memory limits ect. How Scalable is it
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.
Pinia is a real pain in the ***. We had 0 problems with Vuex when Pinia can't properly persist a state...
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.
if you counter = 10 " main.$reset() " will go to get default value, declared into the store...
can you do one of these but use js instead of ts? me love u long time
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?
Seemed to me like $reset was way slower than using the prewritten reset action. Why?
I don't have syntax highlighting when I use SETUP, what could be the problem? Help pls
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
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...
Does someone know the name of the color theme he uses?
explain "Harlem" too.
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.
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?
Work in a boot file?
Theme Color name please?
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
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.
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
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
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 :)
No need for it. Just use inject and provide 😂😂
Meh, I like Vuex
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!
Could you try downloading the sample project and see the differences?
Try: npm install pinia --legacy-peer-deps