State managment in Vue 3 with Typescript - Vuejs Pinia Tutorial / Vuex Killler?

Today we will be looking at Pinia, which uses the new reactivity system to build an intuitive and fully typed state management system. We will be creating a shopping cart application from scratch to learn the basics of using Pinia with Vue 3 Composition API and Typescript. This application will allow users to add and remove URLs from a shopping cart store created from Pinia.

✨ SOCIAL ✨

⚡ RESOURCES ⚡

⭐ TIMESTAMPS ⭐
0:00 - Intro
1:00 - Why Pinia?
2:50 - Creating Pinia Project
3:45 - Creating Store
5:15 - Using store in Components
6:37 - Conclusion

[SamWynne]

Great video as always Justin, I really appreciate the cadence of your voice. I've really enjoyed a handful of your videos, but today you got my sub. See you soon

[xrk]

Hi. Which font do you use in terminal at 3:00? It's so nice
P.S. Thanks for the video, your quality rocks! You deserve more views

[MrChickenpoulet]

Yea interesting library, main advantage is that you have access to the devtool (which you forgot to show!).
Also, in Vue2 you could have more or less the same feature using Vue.observable function (which has been replaced by the reactive function in Vue3!), so since vue 2 you could already drop vuex and enjoy a global state mangement with awesome type checking features !

The only downsides I have found about dropping vuex and doing self made store is that you do not have access to the devtools anymore and some vuex plugins. But I never used any vuex plugins so it's ok for my use cases, and the devtools was useful because of the lack of great type checking while using vuex.

For me, vuex might be dead for good!

[michaelpumo]

Would it be better to destructure the cart variable from within setup, so that it's less prone to breaking? You wouldn't know it will break in the template at runtime until you did something wrong like: cart.deleteAllItems().

Better to do:

const { itemsCount } = useCartStore()
return { itemsCount }

[timercadoindustrialmi]

Thanks for this tutorial! I just followed as it goes, but I'm getting this issue, any advice to fix it? :

PS npm run serve

> vue-cli-service serve

INFO Starting development server...
ERROR ValidationError: Progress Plugin Invalid Options

options should NOT have additional properties
options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

ValidationError: Progress Plugin Invalid Options

options should NOT have additional properties
options should NOT have additional properties
options should pass "instanceof" keyword validation
options should match exactly one schema in oneOf

at validateOptions
at new ProgressPlugin
at new Progress
at new progressPlugin
at
at Object.toConfig
at
at Array.map (<anonymous>)
at module.exports.toConfig

[nicojmb]

Graeat video, can you make new with persistent storage support with pinia and vue3?

[manjubeli]

Great video, thanks for introducing to pinia.
Errors importing Pinia "pinia.mjs 1083:44-52
Can't import the named export 'computed' from non EcmaScript module (only default export is available)" checking on Pinia github issues.

[PaulPeterson]

If you like piña coladas... 🎶🎤🍍
Awesome library... I really think Vuex should be completely rethought (even after the improvements of v4) or come with a better alternative with official support inside the core ecosystem. This is for sure an alternative that I'm gonna try in the next project.

[luk]

I just hate Vuex, even that I was using it in every project. I was not aware about Pinia. For sure I will test that, thanks.

[xAlpine]

How much more lightweight is pinia vs vuex