With Vue 3.0, you may not need Vuex anymore
Vuex
Vuex is a great state management library. It's very simple and integrates very well with Vue. Why would anyone give up Vuex? The reason may be that the upcoming version of Vue3 exposes the underlying reactive system and introduces new ways to build applications. The new responsive system is so powerful that it can be used directly for centralized state management.
Do you need status sharing
In some cases, data flow between multiple components becomes very difficult, so centralized state management is required. These situations include:
1. Multiple components use the same data
2. Deep nesting of components
If none of the above is true, the answer is simple, you no longer need state sharing.
But what if you have one of the above situations? The most straightforward answer is to use Vuex. This is a tried and tested solution, and it works well.
But what if you don't want to add other dependencies or find that the settings are too complicated? The new Vue3 version and Composition API can solve these problems through its built-in methods.
New solution
The shared state must meet two conditions:
Responsive: When the state changes, the components that use them should also be updated
Availability: status can be accessed in any component
Responsive
Vue3 exposes its responsive system through many features. You can use the reactive function to create a reactive variable (the alternative is the ref function).
import {
reactive } from 'vue';
export const state = reactive({
counter: 0 });
The Proxy object returned from the reactive function is an object whose property changes can be tracked. When used in a component template, when the response value changes, the component will re-render.
<template>
<div>{
{
state.counter }}</div>
<button type="button" @click="state.counter++">Increment</button>
</template>
<script>
import {
reactive } from 'vue';
export default {
setup() {
const state = reactive({
counter: 0 });
return {
state };
}
};
</script>
Availability
The above example is very useful for a single component, but other components cannot access the state. To overcome this problem, you can use the provide and inject methods to make it accessible to any finger in the Vue 3 application.
import {
reactive, provide, inject } from 'vue';
export const stateSymbol = Symbol('state');
export const createState = () => reactive({
counter: 0 });
export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
stateSymbol,
createState()
);
When you pass Symbol as a key and value to the provide method, any child components in the method can use the value. When Symbol provides and retrieves the value, the key uses the same name.
This way, if you provide a value on the topmost component, it will be available in all components. In addition, you can call provide on the main application instance.
import {
createApp, reactive } from 'vue';
import App from './App.vue';
import {
stateSymbol, createState } from './store';
const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');
<script>
import {
useState } from './state';
export default {
setup() {
return {
state: useState() };
}
};
</script>
Make the code more robust
The above solution works, but there is a disadvantage: you don't know who modified what. The status can be changed directly without restriction.
You can use the readonly function to wrap the state to protect the state. It overwrites the variables passed in the Proxy object, which prevents any modification (warning when modification is attempted). These changes can be handled by a separate function that can access writable storage.
import {
reactive, readonly } from 'vue';
export const createStore = () => {
const state = reactive({
counter: 0 });
const increment = () => state.counter++;
return {
increment, state: readonly(state) };
}
The external will only have access to the read-only state, and only exported functions can modify the writable state.
By protecting the state from unnecessary modifications, the new solution is relatively close to Vuex.
to sum up
By using Vue 3's reactive system and dependency injection mechanism, we have transformed from local state to centralized state management that can replace Vuex in smaller applications.
Now we have; a state object, which is read-only and can respond to template changes. The state can only be modified by specific methods, such as actions/mutations in Vuex. You can use the computed function to define other getters.
Vuex has more functions, such as module handling, but sometimes we don't need it.