Vue State Management with Composition API - No need for vuex & vuex-persist?

At the end of the video, we are going to save data of the global state into the Local Storage.

What do you think? Can this approach replace vuex and vuex-persist?
What pattern do you prefer for a state management?

Timestamps:
0:00 - Intro
1:27 - Creating a project with vue-cli
2:38 - Local state for movie list and move it to the global store
7:30 - Getter for number of movies
8:27 - UserLogin component, form and fake API call
13:25 - User module (user's global state)
14:42 - Saving user's data into the global state
16:55 - UserProfile component with user's full name getter
19:35 - Store if the user is logged in
24:00 - Store "loading" state
26:34 - Add Movie action
30:00 - Remove Movie action
32:20 - Logout action
33:11 - Global state module reactive to changes in other module
37:03 - Save global state to the Local Storage
41:38 - Thanks for watching

[thamibn]

Nice tutorial straight to the point and good example used tired of Todo list app and counter examples.

[md.siddiq]

This is an awesome explanation. I not only learned the state management but also the use of computed & watch functions. I was a little confused about those. But now I understand properly. Hope more videos will come in the future

[OdwallaJuice]

This was an AMAZING tutorial. I learned a lot from watching this. It really shows off how powerful the composition API is. Thank you!

[maverickchan]

EXACTLY what i need... great ! Nice Work man!

[nyambe]

wow, a DIY vuex. That is amazing. Wow if you combine this with emit and component communication, you can really do powerful things,

[MichaelJClegg]

Thank you for the clear presentation. I want to point out one problem early on (5:00 approx.) - the assignment: - const state = reactive(defaultStatus) in "useMovieState.js" line 11; caused an error msg: "can not make object reactive" - solution was to make the state const itself reactive rather than go through the assignment mentioned above. Thanks

[adadaprout]

Thank you so much it's very helpful, and clear.

I have been learning vue 3 recently and I have been contemplating all the different possibilities for state management for a not so big app I am doing, and this solution seems awesome.

Vuex seems a little bit overkill for me and I have so much to learn already with vue in itself that not having to add a new thing to learn (like vuex etc.) is a real good thing.

The possibility of doing it directly with composition API is awesome.

[Anaxarchos]

thanx for this great tutorial. It really helps to use the composition api as a replacement for vuex.

[rastradev]

loved the video myan. how about with Typescript too?

[deger.ogretmen]

Tutorial is great! It is nice to see composition API works like Vuex. But I think this is sth like imitation of Vuex. Because vuex really store state data. For example, if you want to use this with i18n or sth else, you can not store en-US and de-DE string in a composition store state. You should always save it in the localstorage or your database. The state which is disappearing when you refresh the page is useless in my opinion. But thank you for great method explanation.

[GuitarristaBla]

Nice video, thanks for sharing. But what about the security issues with using local storage?