Learn Pinia in 30 MINUTES! (Vue JS 3)
HTML-код
- Опубликовано: 18 июн 2024
- In this video I’m gonna show you how to get started with Pinia in 30 minutes!
👉 Pinia & Vue 3 Course: dannys.link/compositionapi
Pinia is an incredible new State Management library for Vue 3 Composition API apps.
In this video I'll show you how to use it to move all of your app's Data, Methods & Computed properties into State, Actions and Getters within a Pinia Store - so that all of these can be used ANYWHERE within your app - in around 30 minutes.
⬇ Chapters: ⬇
0:00 Introduction
1:30 Getting Started
3:15 Simplify Project
5:27 Counter App - Elements & Styles
6:58 Counter App - Data & Methods
9:26 Counter App - Computed Property
11:22 What is Pinia?
15:34 State
19:52 Actions
21:59 Getters
25:30 Two-Way Data Binding
27:04 Use our Store Everywhere!
29:31 Child Components
👉 Full Pinia & Vue 3 Course: dannys.link/compositionapi
👉 My Courses - dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup - dannys.link/vscodesetup
👉 DONT CLICK THIS - dannys.link/dontclick
Please Like, Share, Subscribe & Comment - it all helps me create more content for you!
👉 Full Pinia & Vue 3 Course: dannys.link/compositionapi
👉 My Courses: dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup: dannys.link/vscodesetup
👉 DONT CLICK THIS: dannys.link/dontclick
Hi, Danny! How can i get your course, if udemy bans payment from my country?
@@antoncherry It looks like you can pay with PayPal. Maybe give that a try? Possibly use a VPN to appear as though you're from another country (if necessary)...
@@MakeAppswithDanny unfortunately i even can't choose any payment type on udemy, even under vpn ((
@@antoncherry have you tried some googling Anton? Does this help?: www.quora.com/How-do-I-buy-a-course-on-Udemy-India
@@MakeAppswithDannyIn my case, when i create the Vue 3 project, the project gave me the Setup Store, instead of Option Store like in your video.
It looks like this in the store file:
"export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const name = ref('Eduardo')
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, name, doubleCount, increment }
})"
I am not really familiar with Setup Store much.
I am, however, very familiar with Option Store, because Vuex has the same thing too.
Great. Thanks !
Vue3 + Script Setup + Vite + Pinia + PrimeVue = Happy & productive person.
Nice Javier! 👍
Vue3+router+pinia+vite+vuetify great combo
I had the impression that Pinia was hard but your video definitely made it much easier for me to understand it.
Glad it helped!
Many thanks, once again you save my life with this short tutorial.
And I just bought your course about composition API as I'm sure I'll learn a lot ! ;)
Thanks Jeff hope you enjoy the course
Excellent! I like how you keep it incredibly simple by removing everything else unrelated.
Glad it was helpful Seymour!
Awesome tutorial, simple, straight to the point and engaging. Thanks a lot, just what I was looking for!
Great thanks!
Dude, this is explained really well! The right mixture of progress and explaing of basics. I really liked that you started out with coding the default Vue App, as you immediatly know what corresponding action you were taking in the Pinia part.
Thanks Outside7!
Thank you Danny. What a clear explanation to learn the basic of pinia.
Glad it was helpful Ivan!
Brilliant explanations! A lot of tutorials skip the details but you actually take the time to explain things in a clear way.
Thank you
Also I liked and subscribed of course, I need to binge the rest of the videos :)
Glad it was helpful! 👍
Thank you for making those quick intro courses Dan, it's really useful to see whats new, what it is and where it all comes together. As a suggestion, I'd like to ask if you could make one of those everytime a new Vue, Quasar and JS major feature is released, it really helps in getting up to date and staying on top of things
Thanks for your suggestion! 👍
Sir Danny, I have learned a lot from you and still learning it and all of your tutorials are amazing no doubt to the point the best thing about this series is how you compare the previous version with the new version. Thank you so much for giving us these precious topics
Wow thanks Raja, glad to help! 👍
Thanks, the two way binding was what I was looking for! Other tutorials seem to skip over that.
Glad I could help, Ian!
You are the best tutorial teacher in all youtube. I just saw your Vue2 with Quasar framework tutorial about two years ago and got my first job. So many thanks from me Danny.
That's great to hear, Ali! Thanks!
Thanks for this wonderful video!!! I'm starting out with vue, I am a c# dev, and having this info is extremely useful, I can see using Pinia is like having Model classes in a c# API and being able to call their fields from all over the project!! Thank you very much!
Glad it was helpful, Guillermo!
Great!!! Everything is clear now.
Thanks a lot Danny. Blessings from Venezuela.
Glad it helped, Francisco!
You are a legend Danny. I always tried to dodge Pinia but you have simplified it so much that I am going to go back to a few projects and implement Pinia instead of Vuex
Good to hear it, Suleiman! 👍
Great video. You explain things very well. This is really easy to follow. Good stuff! Thanks!
Thanks Damian!
I was really waiting for this :) thanks a lot.
My pleasure José!
You are a gem in the universe of Vue, Danny.
THANK YOU 🙏
Thanks Soumitri!
Many, many thanks! It’s helpful and easy to understand! 🥰
Thanks Paws!
Lifesaver! Too many times I get a headache with passing props down etc.
👍
Thank you for this video.
I'm French and I couldn't find a French video that would allow me to really learn how to use Pinia.
You explained it really well.
Glad it was helpful!
Thank Danny, the tutorial is simple and easy to understand!
Glad it was helpful!
Thanks Danny for new tutorial to use pinia.
You’re welcome! 👍
I just finished your new course on Udemy. I've been holding off moving to Pinia and the composition API for some ridiculous reason - Your course was exactly what I needed to make the transition - perfect length, no nonsense approach. Thanks!
That's great to hear Paul! Thanks! 👍
Fantastic tutorial! Thank you very much! 😃
You're very welcome Øivind!
many thanks mate, really helpful!
No worries el gabo!
You made it so easy to follow along.
Thanks Andrew 👍
The good news: That was an amazingly clear introduction to Pinia.
The bad news: I want to update my Quasar 1 app to Quasar 2 with Vue 3 and Pinia and restructure all of my components to abstract all the data into Pinia stores to remove 90% of the props/emits
Ooh that's gonna keep you busy for a while, Tom! 😂
Hi Danny,
Thank you very much for this tutorial.
I tried to read the official documentation but couldn't understand totally the concepts.
This video made it very simple and easy to understand. 🙂
Glad it helped, Gauthier!
One of the best explaination so far
Thanks!
I loved this video ... amazing teaching skills ...thanks
Thanks Leandro!
2 ways binding is brilliant compering to the vuex!
Sure is!
Brilliant, Danny! I've yet to incorporate pinia into my workflow as I've been comfortable with vuex or building a makeshift store using composibles with provide/inject. Pinia looks so much cleaner and I will definitely start using it from now on. Great to see it can be debugged in devtools - This was the only thing that kept me clinging on to vuex.
Thanks for the tips!
No worries Brandon. I converted Fudget 2 over from composable state to Pinia. Took me about 3 days but well worth it! I missed the debugging more than I thought I would!
@@MakeAppswithDanny nice one! Yeah the more complex the state management gets, being able to time traveling to specific state changes can save you a lot of head aches and tantrums.
very good examples. thanks
Thanks Yarik!
Thank you thank you so much, incredibly easy and useful :,3
Glad it helped! Thanks Michael!
Just subscribed you are a really good teacher thank you
Thanks for the sub, Javhaa!
thank you for sharing this with us!!!
No problem. Thanks Adel!
Very nice explanation.
Thanks!
well done danny its clearly usefull tutorrial best regards
Glad it was helpful Alfri!
Bro Danny really I love your way about explain anything on Vue ❤️
I hope you do more tutorials about Vue again and again
Sorry for my bad English 😅
Thanks for your kind words. I understand completely 👍
Very clear!
Thanks!
思路清晰，一看就会！
谢谢！
Thanks for greate work !
My pleasure Andrej!
thanks very usefull video!
Thanks!
Thanks u sir it's really help for me .
Most welcome 👍
Good Video Thanks!
Glad you liked it!
amazing teaching skill
Thanks TTT!
Great stuff Danny! I've just finished your course on Composition API which is awesome - thanks for doing that! I now struggle to understand though what is the connection between the store and persistence storage. Do I need the store at all if I have a database? I know you've got courses where you build a backend and connect the app to a database but I'd love to see a continuation of your last course with the backend and deploy since the technology has evolved since you published the previous courses. Anyways, I'll be waiting for the new videos and courses!
I’m actually working on a Firebase 9 module to add to the course 👍
I learned from this video so i buy the course from your url to Udemy, thanks
Thanks Lily, hope you enjoy the course!
thanks so much sir
My pleasure, Tawangsari!
thank you so much
You're welcome!
thank you ❤❤❤
You're welcome 👍
Thankyou so much
Thanks Michen!
Thanks!
Thanks for the donation, Pavel! 👍
Thank you
Thanks Al! 👍
thank yuuuuuuuuu. awesome!
Thanks Jacky!
thank you
Thanks Павел! 👍
awesome content
Thanks Enzo!
Hello Danny, your vids are great and straight to the point as always. I just want to ask you if there will be a chance you will make a video on how to effectively build vue frontend with some of the most used php frameworks. Nobody i have seen till now could be as effective as you are. Hope this will be of your interest. I personally use Symfony framework but will appreciate any of your preference if you will do it...Thanks a lot for your amazing job!
Thanks I'll consider it!
Awesome Danny! Thank you for this! Question: What should we do if you want to re-use the counterStore but should have independent state from the others so their values don't auto-update with other components?
Good question. I'm not sure if that is possible (but check the Pinia docs). What I would probably do is have two different state properties for the two different counters. Then for the actions, maybe have a second parameter to indicate which counter should be updated.
你的视频讲的很好
谢谢！
Simple direct and professional, thank you and you have my esteem.
Did you create some content as well to use typescript in vue 3? in the meantime, I'm off to buy your course on udemy!
Thanks. No Typescript stuff as yet. 👍
thx！
No problem!
Great video ❤
Can you show how we get the updated values even after window reloading or refresh page ?
Thanks. To do this you will either need to store the data remotely (e.g. in a database such as Firebase) or locally (e.g. in the browser's IndexedDB database). Check out my videos on Vue & Firebase, or the video on Localbase 👍
Super great work 🙏 vuex going to dinosaurs 🦖
😂
If anyone is having trouble seeing the pinia store in Vue devtools, like I was, there is an icon to the right of the word Timeline in Vue devtools where you can select to view Components, Pinia or Routes. you can see it in the top right of this video at 18:05
Do you have the latest version of Vue devtools? Also there's been a couple of times where I had to quit Chrome and restart it to get the devtools working properly...
@@MakeAppswithDanny I had an older version and had just upgraded it. Also I did restart Chrome. It worked fine, it just wasn't obvious that I had a different selection in the menu I mentioned
Something that would be helpful is to use Vue in the context of a larger project such as a PHP framework (Laravel, WordPress plugin etc). What I find confusing is that most tutorials assume we are building a 100% Vue app all by itself bundled in a tidy little folder. But in the case of WordPress for example, the overall page is dynamically created by PHP, and your JS and other assets have to be enqueued. I'm not sure how this changes the type of compiling we do, for example bundling. Sometimes we bundle Vue but sometimes we leave it out and load from CDN on its own. What are the rules here? How do you work with NPM and bundling and such when part of the app is dynamically generated from something outside NPM? Don't we need to protect our dev sources and make sure those dev files don't get distributed with the plugin?
I have an app I'm doing now as a WordPress plugin, and I'm using Vue for the main interface. It's tightly coupled to the WP theme, custom fields, page builder etc. I can't use npm run dev or preview because there isn't just a single index.html file sitting there that can be served, the entire WordPress site would have to be served to test the app.
I just find the whole thing a bit confusing. There are a million tutorials about opening a fresh empty folder and starting a Vue or Vite project, but almost none that help you "inject" Vue into a separate architecture.
As one example, when I try to run "npm run build", Vite expects there to be an index.html file sitting there that it can bundle. But in my WP app there wouldn't be, and Vite complains. I can adjust the config to pick some other name for this file, but in fact this file isn't necessary, because the plugin is not loading static html files, the page is being generated by dynamic PHP, and I couldn't figure out how to make Vite understand what to do. Vite also names the bundle with a random text like "bundle-39sk34u9sj.js", but when it does this, it means I have to go update the WordPress enqueue function with the new name. I didn't see any way to make Vite not add these strings to the bundle.
Anyway, thanks for the video, it helps, but I keep running in to so many issues because I'm not doing a tidy standalone pure Vue app all wrapped up in a single folder.
There is a different approach to use Vue with WordPress.... that is to have WP as headless serving just data through either REST API or graphql (using wp-graphql plugin and its few extensions such as wp-graphql-jwt for authentication). I prefer consuming WP data using GraphQl.
That being set up, you can then create a separate Vue project for the front-end. Again, you can use plugins such as vue-apollo or vue-urql to get graphql data from the back-end. If you prefer REST API you can use Axios in the front-end.
The above approach is much cleaner separating fully the back-end from the front-end and your WP becomes fully agnostic.
@@sania3631 WordPress is not headless. It's the client's website, they use in the traditional sense. I guess you must be saying to load WP headless directly just into my plugin app?
If I had a sample plugin built this way I could analyze, that would help.
Like, subscribe and commented, well done video, well comented edited organized, simple and great.
Thanks and welcome!
Great Video, thanks, Danny. Can we have watch in Pinia store? Let’s say if count > 10 reset to 0.
Kind of like comp API
watch(count, (target) => {
if (target > 50) {
count.value = 0
}
})
Thanks Surush! Yes, you can, but you will need to use the "Setup Store" approach to creating your store rather than the "Options Store" which is covered in this video. This is a more "Composition API" style approach: pinia.vuejs.org/core-concepts/#setup-stores
Thanks Danny.
Great as always.
Can u make new Videos on
Quasar?
Especially such, where building Mobile Apps?
Can i ask u what's the technical solution for using Local-PushNotifications in Quasar-Cordova App.
I want to build some kind of,
Fasting App, where the user can set a time(for the Pushnotification ) when he can have meal the next time.
Pushnotification (as kind of reminder) has to pop up from a closen app.
Did i have to use Localstorage?
And some kind of service worker?
Or just a plugin?
Thank you
For a mobile app to be published to the App Store(s)? It’s probably best to avoid PWA. You can do native notifications like that using Cordova plugins. Not sure which ones off the top of my head…
Yeah an app to be published to the app stores.
Ok i will do a research.
One last question,
Do u still recommend cordova over capacitor?
And if yes, why?
@@dekebaoe To be honest I haven't tried Capacitor. I've always been able to do what I need with Cordova, so I've just stuck with that...
@@MakeAppswithDanny I'm curious how you're gonna publish Fudget 2 to the App Store? Are you gonna rewrite the app? Sorry for a silly question.
@@iliaryzhkov yes I’m rebuilding it from scratch. It will be a completely separate app. I’ll rename the old version to Fudget Classic or something like that
Thanks for the great video as always! But modules like Pina and Vuex always confuses me with when using vue3. Whats the benefit of using them instead of just global ref/reactive value exported/imported on demand?
Thanks Jove. The main benefit is the debugging capabilities in Vue devtools - I.E being able to see the entire state and modify state properties via the devtools
Great Toturial. But I was wondering why you did not call instance.use(createPinia()) before defineStore, so is it essential to ues(createPinia) in the main.js?
Thanks Peng. I think this was added automatically by the build tool (at the start). 👍
at 7:22 why .buttons button{}, what does the same 'button' mean here? Just bought your udemy course, great style at teaching!
Thanks Leo & welcome to the course! .buttons will select the div with a class of buttons. And button will select the button element inside that div. I have a short course on the basics of HTML, CSS & JavaScript which might help you: dannys.link/firstwebsite
Good job! How can i use router.push() inside pinia?
Haven't tried it yet Aguilar. Looks like you need to use a Pinia plugin: stackoverflow.com/a/70905178
nice lecture on Pinia and thanks for all you do. Danny, do you think it's wise to use firebase for my mobile app? please I need your opinion
Thanks! It’s hard to say, it depends on the project. I’m using Firebase for Fudget 2. What i did was spend a day or two estimating the potential costs based on my particular app. And it seemed like it would work out ok. Obviously you need to be very careful and make sure you’re only adding and reading data when necessary. A few people have received insanely huge bills because they didn’t code it right.
@@MakeAppswithDanny haha I remember seeing a Colombian crowd funding website a couple of years back who racked up over $30k USD in 72 hours because of this very reason.
@@brandonsayring 😂
@@MakeAppswithDanny can the mobile app also be done with a persistent vuex without needing firebase and leaving it for the user's device storage
@@shorthaircut_blog1274 Yes you could do. Although browser storage (localstorage, websql, indexedb etc) can be a bit unreliable. Especially on Android - it can sometimes be wiped for example when the user updates their Android OS. 👍
What VSCode extension are using to get the div.button intelli-typing to work?
That's Emmet, it should be built into VSCode and work by default. You can find info on the VSCode website.
Hi @Danny,
If I open the same app in the next tab my store is getting reset. any help ?
I don't want to store state in my local using persistedState
You will need to store it somewhere (and then retrieve it), either in LocalStorage, IndexedDB or in a back-end database 👍
Couldn't get it to work at first setting up the counter. I was wondering why there was no setup function and why we didn't return the count variable. Then I noticed the setup attribute on the script tag. I had no idea you could do that. Interesting..
Yeah check out my script setup Tutorial: ruclips.net/video/9whgkjxoCME/видео.html
Thanks for this! I'm starting to use Pinia in my project but it wont show on my devtools hmmmm is there something Im doing wrong?
Check u have the latest version of Vue devtools. Also, quitting Chrome and restarting sometimes fixes this issue for me.
10:25 in which case you need to use "computed() " ?
I'm not sure what you mean, DOMI. We are using a computed property here?
Please can you do tutorial on pinia crud and auth using vue3
I'll consider it, thanks
please make a nuxt course
Does Quasar support Pinia?
Yes Tanzim. There is now an option to add Pinia when you create a new Quasar project. They’ve also added documentation about it. 👍
It's a global state what if we want to use that independently and each component has it's own state ?
It depends, but you could have separate stores for each component.
Doesn't this basically turn your app back into the options API? your store actions are basically just global methods?
It is kinda similar to Options API, but it also gives you global state management across your app
How to show a banner with pinia?
I want to show a banner when user click on a log in button
You could just have a state property which toggles whether or not it is shown, e.g:
state: () => ({
showBanner: false
}),
My banner
@@MakeAppswithDanny thank you
Greetings: How much do you charge to do an iOS App? Thank you kindly. Stay safe ;-)
I don't currently do any freelance app development, nagamachi 👍
Do you happened to know of someone who would-by any chance, please? I’m in Newcastle. Thank you kindly. Stay safe always…
Спасибо тому, кто перевел видео заранее, не пришлось ждать )))
the only pinia i want is colada
🍹
the red ring when clicking is too much
Why use pinia over a composable?
Main reason is that you can have a clearer picture of what is going on via the devtools integration. Also, there is a new "setup" style available in Pinia stores which is more like composables.
@@MakeAppswithDanny I see, that sounds good. Using a store in the past in large projects has created some unexpected bugs. I love the concept of keeping everything in together for easy reusing of code. I will give it a try ... but I love the composable system.
@@nyambe It's perfectly fine to do it that way 👍
Welp.. well time to refactor my app from a garbled mess of emitters and functions lol.
It will be worth it 👍
This is 10 minute video forcefully extended to 34 minutes.
More like a 1 hour video forcefully edited down to 34 minutes! 😂
@@MakeAppswithDanny c'mon, this is literally example from starter documentation. It's even less than 10 minute read.
You put too much of boilerplate talk
No giving it a like just because he's using close-sourced Chrome instead of open-source Firefox
thanks for using open source RUclips...
@@MrMartinR The level of dumbness is beyond me. It's too late for online videos. There is no competitor and it's gona be the same level of control, dictatorship and debauchery soon at the browser level itself if we keep favoring Chrome. It always starts innocent, as was the case with IE6 and the EEE strategy. And when the abuse starts it's too late and there's no going back. Is that what you want?
May be those videos might help figure it out:
watch?v=eA8O97U1Pbc
watch?v=IQXLwA1YPDM
@@MrMartinR The movie Idiocracy is starting to sound like a documentary these days. Another one I watched lately is Sorry To Bother You...not as funny but quite insightful.
Still resisting with FF here too, but I get when people decide to go with the tide.
sad mor_on
Stop background music
¡Thank you Danny! I´m very exciting to migrate a project using Vuex, regards from México
Thanks! Good luck with your migration!
Thank you
You're welcome!