Vuex Basics in Vue 3 with Composition API in 6 minutes

Today we will be creating a simple counter app from scratch to learn the basics of using Vuex 4 with Vue 3 Composition API. We'll start by taking a look at Vuex concepts like state, getters, and mutations and how to use them within the options API, then we will switch over the compositions API and implement the same functionality. We'll also create some reusable helper functions to make accessing the store in the composition API more readable.
#vue #vuex #composition-api
Discord - / discord
Twitter - / jsbroks
⚡ RESOURCES ⚡
Vuex 4 Docs - next.vuex.vuejs.org/guide/#th...
Vue 3 - v3.vuejs.org/
Composition Vuex Helper functions Issue - github.com/vuejs/vuex/issues/...
Source Code - github.com/codingwithjustin/v...
⭐ TIMESTAMPS ⭐
0:00 - Intro
1:08 - Creating a project
1:17 - Vuex Concepts
2:45 - Options API
3:35 - Vuex map Functions
4:24 - Composition API
5:00 - Composition Helper Functions
6:02 - Conclusion

[@zbynekjurica]

This is actually insanely high quality tutorial. Keep it up!

[@user-mg3ul1zb3s]

Thank you, I've been looking for such a video for a long time

[@Squawkize]

Appreciate this tutorial! I was looking everywhere on how to use the mapstate in the composition api. Thank You!

[@luischinchilla-garcia5640]

Absolutely amazing!

[@arsalabangash]

Brilliant work Justin!

[@pavelino17]

This video was really helpful and clear, thank you.

[@Majik_exe]

Used the helpers in a project im working on, Nice!!!

[@namero999]

Thanks for respecting my time.

[@carlomigueldy]

Good stuff!

[@Useroelas97]

thank you so much brother (y)

[@dexmbachu]

Thanks for this, i wondered why i couldn't use mapGetters in vue3 composition api.

[@mauriciom7691]

thanks you!!

[@bunnyhaldar8740]

👍👍

[@wijaksanapanji]

Love it! but I think the background music a bit to loud.

[@ZynthProductions]

does the helper gonna work with namespacing?

[@SirAlexMayo]

How does it work with different named spaced modules?

[@gtbaba123]

In start I didn't vuex so now can i do it manually?

[@shutterradio]

Do I need to use Vuex 4 in order to use it with composition-api in a vue 2 project?

[@CodingWithJustin]

You'll need Vuex 3, I dont think Vuex 4 is combatiable with vue 3

[@SyedHaroon786]

Nice tutorial, is there a way to do name-spacing?

[@rngbaguette]

Yes there is! For the state for example, you’d need to put in the namespaced „path“ so to say after your desired property: store.state.some.module.counter
store.getters.some.module/getCounter
store.commit(some.module/SETCOUNTER, payload)

[@zombaju]

i don't know when to use options or composition api?

[@Byku010]

I do lvoe ur videos about vue! I only miss part, where u do tutorial with typescript instead of js only ;/

[@yuvoria.official]

Options is prefer

[@kinax2]

What about actions ?

[@CodingWithJustin]

Checkout my other videos

[@yeravl]

Vuex or composition API? What's better?

[@robertotonino2916]

If you’re committing from the store, why are you calling the helper function useMutations? Shouldn’t it be useActions?

[@CodingWithJustin]

Commits call mutations, while dispatch calls actions

[@robertotonino2916]

@@CodingWithJustin you’re right I always get confused, sorry!

[@LukeryaPereprygova]

ничо нипонил