With Vue 3.0, Vuex may be able to retire early

This article was reproduced from the public number: Code Secret Garden

Vuex is a great state management library. I t's simple and integrates very well with Vue. W hy would anyone give up Vuex T his may be because the upcoming Vue3 release exposes the underlying responsive system and describes new ways to build applications. The new responsive system is powerful and can be used directly for centralized state management.

Do you need a status share?

In some cases, the flow of data between multiple components can be difficult to transform, requiring centralized state management. These include:

• Multiple components use the same data
• Components are deeply nested

If none of the above holds true, the answer is simple: you no longer need state sharing.

But what if you have one of these situations? T he most direct answer is to use Vuex This is a proven solution and works well.

But what if you don't want to add additional dependencies or find the settings too complicated? The new Vue3 version and Composition API address these issues through their built-in methods.

New solutions

The sharing state must meet two criteria:

• Responsive: When states change, the components that use them should also be updated
• Availability: State can be accessed in any component

Responsive

Vue3 exposes its responsive system with a number of features. You can use reactive function to create responsive variables (instead of ref function).

import { reactive } from 'vue';


export const state = reactive({ counter: 0 });

Proxy object returned from the reactive function is an object that can track changes in its properties. When used in a component template, the component is re-rendered when the response 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>

usability

The example above is useful for a single component, but other components cannot access the state. To overcome this problem, you can use provide and inject methods so that any finger in the Vue 3 app is accessible.

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 provide method, it can be used by any subcommission in that method. Key uses the same name when Symbol provides and key values.

This way, if you provide a value on the topmost component, it will be available in all components. Alternatively, 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 your code stronger

The above solution works, but with one drawback: you don't know who modified what. The status can be changed directly, with no restrictions.

You can use the readonly function to wrap the state to protect it. I t overrides the variable passed in the Proxy object, which blocks any modifications (warning when attempting to modify). These changes can be handled by individual functions that have access to writeable storage.

import { reactive, readonly } from 'vue';


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


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

Externally, only read-only states will be accessible, and only exported functions can modify writeable states.

By protecting the state from unnecessary modifications, the new solution is relatively close to Vuex

summary

By using Vue 3 responsive system and dependency injection mechanism, we have moved from a local state to centralized state management that can replace Vuex in smaller applications.

Now we have; a state object that is read-only and can respond to changes to the template. S tates can only be modified in specific ways, such as actions/mutations in Vuex You can use computed function to define additional getter

Vuex has more features, such as module processing, but sometimes we don't need it.

That's W3Cschool编程狮 says about Vue 3.0, and Vuex may be able to retire early, hoping to help.