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
@@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)...
@@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.
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!
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
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.
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.
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 :)
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.
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
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 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!
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
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 ! ;)
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
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. 🙂
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 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?
@@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
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.
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 👍
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!
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
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!
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!
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.
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
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..
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! 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.
@@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. 👍
i wonder, how we save the last value of data on pinia state? because what i see in your video, everytime you refresh the browser, it'll change the value to 0(initial value). thank you
You would need to save it either to a remote database (e.g. Firebase) or to the user's browser (in Localstorage or IndexedDB). Then you would need to load the data back in (and add it to the state) when the app starts 👍
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.
@@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
@@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.
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 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! 👍
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! 😂
I had the impression that Pinia was hard but your video definitely made it much easier for me to understand it.
Glad it helped!
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!
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!
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! 👍
Lifesaver! Too many times I get a headache with passing props down etc.
👍
You are a gem in the universe of Vue, Danny.
THANK YOU 🙏
Thanks Soumitri!
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.
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! 👍
2 ways binding is brilliant compering to the vuex!
Sure is!
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!
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!
Thanks Danny for new tutorial to use pinia.
You’re welcome! 👍
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! 👍
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
Thanks, the two way binding was what I was looking for! Other tutorials seem to skip over that.
Glad I could help, Ian!
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
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!
Excellent! I like how you keep it incredibly simple by removing everything else unrelated.
Glad it was helpful Seymour!
Great!!! Everything is clear now.
Thanks a lot Danny. Blessings from Venezuela.
Glad it helped, Francisco!
I was really waiting for this :) thanks a lot.
My pleasure José!
many thanks mate, really helpful!
No worries el gabo!
Very nice explanation.
Thanks!
Thank you Danny. What a clear explanation to learn the basic of pinia.
Glad it was helpful Ivan!
Thank Danny, the tutorial is simple and easy to understand!
Glad it was helpful!
I learned from this video so i buy the course from your url to Udemy, thanks
Thanks Lily, hope you enjoy the course!
思路清晰，一看就会！
谢谢！
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 👍
Awesome tutorial, simple, straight to the point and engaging. Thanks a lot, just what I was looking for!
Great thanks!
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! 👍
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
Great video. You explain things very well. This is really easy to follow. Good stuff! Thanks!
Thanks Damian!
One of the best explaination so far
Thanks!
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.
You made it so easy to follow along.
Thanks Andrew 👍
Many, many thanks! It’s helpful and easy to understand! 🥰
Thanks Paws!
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 👍
amazing teaching skill
Thanks TTT!
very good examples. thanks
Thanks Yarik!
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
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 👍
Fantastic tutorial! Thank you very much! 😃
You're very welcome Øivind!
Thanks u sir it's really help for me .
Most welcome 👍
I loved this video ... amazing teaching skills ...thanks
Thanks Leandro!
Just subscribed you are a really good teacher thank you
Thanks for the sub, Javhaa!
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
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. 👍
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!
thank you
Thanks Павел! 👍
well done danny its clearly usefull tutorrial best regards
Glad it was helpful Alfri!
thank you for sharing this with us!!!
No problem. Thanks Adel!
Very clear!
Thanks!
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.
Thanks a lot man !
My pleasure 👍
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
Thank you thank you so much, incredibly easy and useful :,3
Glad it helped! Thanks Michael!
thanks so much sir
My pleasure, Tawangsari!
Thanks for greate work !
My pleasure Andrej!
thank you ❤❤❤
You're welcome 👍
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: czcams.com/video/9whgkjxoCME/video.html
Good Video Thanks!
Glad you liked it!
¡Thank you Danny! I´m very exciting to migrate a project using Vuex, regards from México
Thanks! Good luck with your migration!
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). 👍
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. 👍
i wonder, how we save the last value of data on pinia state? because what i see in your video, everytime you refresh the browser, it'll change the value to 0(initial value). thank you
You would need to save it either to a remote database (e.g. Firebase) or to the user's browser (in Localstorage or IndexedDB). Then you would need to load the data back in (and add it to the state) when the app starts 👍
thanks very usefull video!
Thanks!
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.
Thankyou so much
Thanks Michen!
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.
Please can you do tutorial on pinia crud and auth using vue3
I'll consider it, thanks
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 👍
awesome content
Thanks Enzo!
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. 👍
Super great work 🙏 vuex going to dinosaurs 🦖
😂
你的视频讲的很好
谢谢！
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.
thank yuuuuuuuuu. awesome!
Thanks Jacky!
Like, subscribe and commented, well done video, well comented edited organized, simple and great.
Thanks and welcome!
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
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?
thx！
No problem!
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
please make a nuxt course
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…
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 👍
the red ring when clicking is too much
Спасибо тому, кто перевел видео заранее, не пришлось ждать )))
the only pinia i want is colada
🍹
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 CZcams...
@@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
Thanks Al! 👍
Thanks!
Thanks for the donation, Pavel! 👍
thank you so much
You're welcome!
Thank you
You're welcome!