Vuex is an awesome state management library. It’s simple and integrates well with Vue. Why would anyone leave Vuex? The reason could be that the upcoming Vue 3 release exposes the underlying reactivity system and introduces new ways of structuring your application. The new reactivity system is so powerful that it can be used for centralized state management.
Do You Need a Shared State?
There are circumstances when data flow between multiple components becomes so hard that you need centralized state management. These circumstances include:
- Multiple components using the same data.
- Multiple roots with data access.
- Deep nesting of components.
If none of the cases above are true, it’s easy to determine whether you need it or not. You don’t.
But what about if you have one of these cases? The straightforward answer would be to use Vuex. It’s a battle-tested solution and does a decent job.
But what if you don’t want to add another dependency or find the setup overly complicated? Together with the Composition API, the new Vue 3 version can solve these problems with its built-in methods.
The New Solution
A shared state must fit two criteria:
- Reactivity: When the state changes, the components using them should also update.
- Availability: The state can be accessed in any of the components.
Reactivity
Vue 3 exposes its reactivity system through numerous functions. You can create a reactive variable with the reactive function (an alternative would be the ref function):
import { reactive } from 'vue';
export const state = reactive({ counter: 0 });
#vue #vuejs #programming #javascript #vue 3 #vuex
