Vuex is a great state management library. It is simple and can be well integrated with Vue. Why would anyone leave Vuex? The reason may be that the upcoming version of Vue 3 exposes the underlying reaction system and introduces a new method of building applications. The new reaction system is very powerful and can be used for centralized state management.

Do you need to share status?

In some cases, data flow between multiple components becomes so difficult that you need centralized state management. These situations include:

Multiple components using the same data Multiple root components with data access permissions are deeply nested If none of the above is true, the answer is simple whether you need it or not. no need

But what if you have one of the following situations? The most straightforward answer is to use Vuex. This is a tried and tested solution, and it does a good job.

But what if you don’t want to add other dependencies or find that the setup is too complicated? The new Vue 3 version and Composition API can solve these problems through its built-in methods.

New solution

The shared state must meet two conditions:

Reactivity: When the state changes, the components that use them should also update Availability: The state can be accessed in any component Reactivity Vue 3 exposes its reaction system through many functions. You can use the reactive function to create reactive variables (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, the component will re-render itself whenever the reactive power value changes.

<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 provide and inject methods to provide any available value 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 the Symbolas key and a value to the provide method, any child components in the method can use the value to inject. 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. Alternatively, you can also call to provide 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 it strong

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 make it protected by wrapping the state with the readonly function. It overwrites the passed variable in the object that the Proxy prevents any modification (a warning will be issued when trying). Mutations can be handled by a separate function that can access and write storage.

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}

The outside world 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.

Summary

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.

We have a state object that is read-only and reacts to changes in the template. 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 features, such as module handling, but sometimes we don't need it.

If you want to learn about Vue 3 and try this state management method, check out my Vue 3 playground.