Detailed explanation of the use of Vue3 state management

background

With the gradual application of Vue3, the demand for state management is increasing. Initially, state management was based on Vuex4, but Vuex4 also exposed some problems. From a personal point of view, Vuex4 is similar to a transitional product, and its support for TypeScript is not complete. If you use TypeScript to write components, you need to follow certain steps to correctly infer types, and it is not friendly to the use of modules. Kia King, a core contributor of Vuex, also said that Vuex5 is already in the plan and can provide complete TypeScript support. So before Vuex5 comes out, or if Vuex is directly "abandoned", are there any other state management solutions?

Provide / Inject

Provide and inject are not new features of Vue3, they already existed in Vue2. The documentation mentions that provide and inject bindings are not reactive. However, if you pass in a listenable object, the properties of that object will still be listenable.

Vue3 has added responsive APIs ref and reactive based on Computed and watch, which can make the application of provide and inject more convenient. Combined with the idea of ​​Composition API, can a simplified version of state management be implemented?

Extracting shared state

// src/context/calculator.ts

import { ref, inject, provide, readonly } from 'vue';

type Calculator = {
    count: number;
    increase: () => void;
    updateCount: (num: number) => void;
};

//provide key, unique token const CalculatorSymbol = Symbol();

//provider export const calculatorProvide = () => {
  	//Number const count = ref<number>(1);
  	//Increase method const increase = () => {
        count.value++;
    };
   //Update method const updateCount = (num: number) => {
        count.value = num;
    };
  	//The shared state object provided const depends = {
        count: readonly(count), // read-only status, modify by method increase,
        updateCount
    };
  	//Use provide api to implement state object provide(CalculatorSymbol, depends);
  	//Return the status object so that the peer can call return depends;
};

//Injection method export const calculatorInject = () => {
    //Use the inject api to inject state const calculatorContext = inject<Calculator>(CalculatorSymbol);
  	//Error checking for injection without sharing if (!calculatorContext) {
        throw new Error('Inject must be used affer Provide');
    }
  	//Return the injected contribution status return calculatorContext;
};

Provide data

Compared with Vuex's global sharing, Provide/Inject can achieve global or local sharing.

Global sharing, you can inject global state in main.ts:

// src/main.ts

import { createApp, h } from 'vue';
import App from '@/App.vue';
import { calculatorProvide } from '@/context/calculator';

// Create a Vue instance const app = createApp({
    setup() {
        calculatorProvide();
        return () => h(App);
    }
});

// Mount the instance app.mount('#app');

If you only want to share locally, you can inject the state into the parent component

// src/views/parent.vue

import { defineComponent } from "vue";
import { calculatorProvide } from '@/context/calculator';

export default defineComponent({
  name: "parent",
  setup() {
    //Shared data calculatorProvide();
  }
});

Injecting data

Subcomponents can inject, use or modify state through state

// src/views/child.vue

import { defineComponent } from "vue";
import { calculatorInject } from '@/context/calculator';

export default defineComponent({
  name: "child",
  setup() {
    //Inject data const { count, increase, updateCount } = calculatorInject();
  }
});

summary

In fact, you can think of dependency injection (Provide/Inject) as "long range props", except:

• The parent component does not need to know which child components use the property it provides.
• Subcomponents do not need to know where the injected property comes from
  

Vue3 makes dependency injection more flexible and convenient, thereby simulating a small state management. In my personal test, the support for TypeScript is relatively complete.

reactive

So without using Provide/Inject, is there any other way to achieve state management? Directly on the code.

Extracting shared state

// src/context/calculator.ts

type Calculator = {
    count: number;
    increase: () => void;
    updateCount: (num: number) => void;
};

//Shared state const calculatorStore = reactive<Calculator>({
    count: 1,
    increase: () => {
        calculatorStore.count++;
    },
    updateCount: (num: number) => {
        calculatorStore.count = num;
    }
});

export { calculatorStore };

Using Shared State

The method of using state is very simple. You only need to import the state. The components that need to use the state need to be imported.

// src/views/any.vue

import { defineComponent } from "vue";
import { calculatorStore } from '@/context/calculator';

export default defineComponent({
  name: "any",
  setup() {
    console.log(calculatorStore.count);
  }
});

summary

In fact, this solution uses the responsiveness of reactive and the principle of importing the same instance. Compared with dependency injection, it is simpler and more crude, and can also correctly support TypeScript verification. However, dependency injection can share different data in different root nodes, while this reactive solution always shares one instance, which is not applicable in some business scenarios.

Conclusion

First of all, Vuex is still a more mature and comprehensive solution. It is just for some simple state management, you can try to change your thinking to solve it; of course, the above solutions may still have many incomplete considerations, and you are welcome to give me some advice~

The above is the detailed content of the detailed explanation of the use of Vue3 state management. For more information on the use of Vue3 state management, please pay attention to other related articles on 123WORDPRESS.COM!