Episode 66: RFC The Vue - Vuex 5
Although it seems like it was only yesterday that Vuex 4 came out, we have noticed that there is already an RFC out for Vuex 5, and it looks pretty exciting! It seems as though Vuex 4 was really just meant to replace Vuex 3 in Vue 3. Whereas we can safely say that there are some big changes on the horizon for Vuex 5, and we use today’s show to dive into them. Our discussion begins with a brief description of what exactly Vuex is and then after that, we dig into all the new features to expect from the update. We devote quite a big chunk of our conversation to sharing our perspectives on the composition API versus the Vuex store, and we talk about how one might replace the other as well as how to use them in conjunction with one another. We also get into the intention to start using actions rather than mutations to update state and what it means that the Vue team is deciding to get rid of modules. Furthermore, our discussion covers features such as composition-based stores, automatic store registration, SSR and hydration, plugins, TypeScript support, and more. Ultimately, the shifts in Vuex 5 herald a huge paradigm shift and we are excited to see how the Vue community reacts to it. Tune in to hear for the full scoop!
Key Points From This Episode:
- A brief description of Vuex, a Redux pattern, but implemented in Vue.
- All the new features on the horizon for Vuex 5 to be found in the RFC.
- Removing mutations and allowing updates to state to happen via actions.
- Flux architecture as a conceptual framework for data flow through your application.
- Whether there is any need for the Vuex store considering the Vue3 composition API.
- Perspectives on the decision to get rid of modules and have multiple global stores.
- Getting away from a mixin paradigm with hook-into methods and moving to pure state.
- Composition-based stores rather than passing in objects and the advantages of this.
- Different ways of using the composition API and what the future might hold.
- Not having to reference the dot value part of each property when using a composition store.
- Discussing what it means that Vuex 5 is proposing automatic store registration.
- How circular store references work and the limited support for these in Vuex 5.
- The addition of plugins, how to use them, and how store actions could trigger router actions.
- TypeScript support, how to link it with plugins, and the extra accessibility this provides.
- Serialization and hydration, what this means, and how it allows for data to be stored and rebuilt.
- An overview of the structure of the RFC and how user-friendly it was to read.
Tweetables:
- “The current thinking is, why don't we just not have mutations and allow updates to state to happen in an action?” — @EnjoyTheVueCast [0:03:41]
- “Dare I say, this almost feels like mixins, but make it name-spaced. You’re just rolling all the stuff in. It feels cleaner somehow.” — @EnjoyTheVueCast [0:15:58]
- “This whole thing feels very exciting in a very weird way. Because I feel I'm more familiar with this non-existent Vuex 5 than I am with the existing Vuex 3 that I've been using for the past few years.” — @EnjoyTheVueCast [0:28:43]
- “This is a really, really big change in how things work” — @EnjoyTheVueCast [0:36:11]
Links Mentioned in Today’s Episode: