Getting Started with Pinia | Crash Course

Learn the fundamentals of Pinia, Vue's new state management library, by building a simple Todo List App. Join Vue Mastery to watch the rest of this course and all of our other premium Vue js courses 👉 www.vuemastery.com/courses
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
0:00 What is Pinia?
2:21 Store: Pattern for State Management
4:10 Pinia is modular by design
6:05 Creating our first store
9:38 Keep watching this course at VueMastery.com

[@VueMastery]

To watch the full Pinia Fundamentals course, visit: www.vuemastery.com/courses/pinia-fundamentals/fundamentals-what-is-pinia

[@VeaceslavBARBARII]

4:03 🔥I didn't expect that comming, lol

[@FloWoelki]

Pinia is a really cute new and refreshed Vuex. Good video and beautifully explained!

[@itskittyme]

best video about Pinia I found today!

[@AngelHdzMultimedia]

Wished you mentioned the Setup Function (Composition API Syntax).

[@VueMastery]

This is a clip from our full course, in which we build an app using Pinia and the script setup syntax version of the Composition API => www.vuemastery.com/courses/pinia-fundamentals/fundamentals-what-is-pinia

[@paulcraven3810]

I used a pattern that involved dependency injection, by providing a class from the top level app.vue, and importing it into any component to mutate the props in the class. Moving through different routes, the state was maintained and reactive. This obviously removes the use of actions and getters, so is my concept legit?

[@aislanarislou]

Seems interesting. Can you show it for us ?

[@paulcraven3810]

Unfortunately I don’t have means to produce video content, however I would like to know a good chat forum to use for sharing ideas and code regarding vue, then setup a repository perhaps, any ideas would be welcome.

[@aislanarislou]

​@@paulcraven3810 you could link us to a gist or a github repo.

[@ahmedbenkrara3164]

while using vuex's state the data gets lost after reloading the page so we are forced to use localstorage or something like that to save data, so my question will be if i used pinia will i face same problem ?

[@denishpatel6038]

It has nothing to do with pinia or vuex, those are just state management Library, it don't save data for you, so you need local storage or similar approach to save data

[@MissLaadyG]

if you don't want to use localstorage, you need another form of data persistence system, such as a database + a backend to send the data in the right format.

[@danielpereirasanches]

What theme is used in VS Code?

[@VueMastery]

Flat UI Dark

[@danielpereirasanches]

@@VueMastery Thanks

[@fardolieri]

What is stopping me from writing a simple module _login-store.js_ that stores my state? export const loggedIn = ref(false) Any component can import it and it couldn't be more easy than that.

[@khizer3528]

Just searching for that

[@passioncorners]

So it's like Vuex ?

[@chizuru1999]

In their documentation they have mentioned you can say Pinia is just Vuex 5 but renamed.

[@passioncorners]

@@chizuru1999 I see, thanks. It must have better syntax and flow if they’re making it Vue official state management now.

[@chizuru1999]

@@passioncorners Ye I am totally new to Vue and In my eyes it s a Modern AngularJS framework 😆. Their documentation is great tho.

[@SirDamatoIII]

@@chizuru1999 great summary. It’s exceptionally powerful, and having improved and fixed most everything annoying in angular.js its a spiritual successor. Of all the frameworks it’s my favorite!

[@deecee2204]

yes without the MUTATOR

[@jfordgaming9615]

Not mature enough but I still used in my new project.

[@AngelHdzMultimedia]

WYTA!? Pinia is Vuex 5. Is the state management now recommended by the creator of Vue and the creator of Pinia.

[@aislanarislou]

@@AngelHdzMultimedia try to use it into a really big and complex app (with Typescript, of course) and you'll understand it.

[@AngelHdzMultimedia]

@@aislanarislou Are you seriously telling me that having mutations is what makes it better for large projects!? (because that's the only difference between Vuex and Pinia, oh and better TypeScript support with Pinia). Where are you getting these "facts" from!? Or they are pure opinions!?

[@mdkawsarislamyeasin4040]

I think It's like redux? 😅

[@salahiddinediouri280]

is the same concept , redux , vuex and pinia is a globale state management extension

[@mdkawsarislamyeasin4040]

@@salahiddinediouri280 Ok thanks 💚

[@salahiddinediouri280]

@@mdkawsarislamyeasin4040 you welcome

[@danielklein2694]

This approach looks kinda outdated - doesn't involve composition API - also you should be defining your stores the way composables are.. (most of veteran vue devs do that too fe. Ant Fu) - also one last thing that made me totally ingore anything in this video is lack of TS..

[@VueMastery]

Hey Daniel. - At 07:30, you'll see we're using the script setup syntax, which is the latest version of the Composition API, recommended by Evan You. - At 09:00, the store is defined the way composables are, per the Pinia docs 😀 - Pinia w/ TypeScript is a topic we're producing content on over at www.vuemastery.com/