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.
There are circumstances when data flow between multiple components becomes so hard that you need centralized state management. These circumstances include:
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.
A shared state must fit two criteria:
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