Shulou(Shulou.com)06/03 Report--

This article mainly introduces vue3 how to use provide to achieve state management, the article is very detailed, has a certain reference value, interested friends must read it!

Preface

In the Vue ecology, Vuex, the official state management library, brings us very convenient functions in the development of Vue applications. However, the size of Vuex 20K + also brings some costs, for applications with smaller projects, the introduction of Vuex is just to store a handful of data such as user information, which is not worth it.

Vue2.2.x provides provide/inject API at a later stage to help us communicate across levels of components.

Vue3.x also puts provide on the application API, which makes it more convenient for us to implement a basic state management on this basis.

How to realize the function of Vuex through provide/inject

First of all, let's think about the general logic, make it into a plug-in and register it in the application instance through the use method.

In the install method, the data is mounted to the root component through the app.provide method, the data should be a responsive data, and for the sake of data security, the change of the data should be limited, follow the design of one-way data flow, and the user can not modify it directly, so when exposing the data, the data should be processed by readonly (read-only).

Implement a Vuex-like useStore function that allows users to access data through this method.

Implement mapState, mapMutations, and mapActions methods similar to Vuex to simplify operations.

The usage is directly the same as Vuex.

Register this plug-in in the application

/ / main.tsimport {createApp} from 'vue'import App from'. / App.vue'import router from'. / router'import store from'. / store'const app = createApp (App) app.use (router) .use (store) .mount ('# app') plug-in entry file

In the entry file, export all methods directly.

/ / sky-vuex/index.tsexport * from'. / main/index' creates a store and mounts the corresponding data to the root component

Store itself is an object that contains state properties and methods such as commit, dispatch, and so on. Some of the most important functions of store are to allow all components to get store objects to get the data in state and to call related methods to modify state.

/ / sky-vuex/main/index.tsimport {inject, reactive, readonly} from 'vue'const mainStoreSky = Symbol (' main store key') interface storeOptions {state?: any actions?: any mutations?: any} export const createStore = (options: storeOptions = {}) = > {/ / create store object const initOptions = {state: {}, actions: {}, mutations: {},} const mergeOptions: storeOptions = Object.assign (initOptions Options) const state = reactive (mergeOptions.state) const store = {state: readonly (state), dispatch (eventName: string,... args: any []) {mergeOptions.actions [eventName] (store,... args)}, commit (eventName: string,... args: any []) {...},} return {install (app: any) {app.provide (mainStoreSky, store)} }} export const useStore = (): any = > {/ / other components through this method Get the store object return inject (mainStoreSky)} to implement the mapState, mapMutations and mapActions methods

Export const mapState = () = > {const store = useStore () return store.state} export const mapActions = (eventName: string) = > {const store = useStore () return (. Args: any []) = > store.dispatch (eventName,... args)} export const mapMutations = (eventName: string) = > {const store = useStore () return (. Args: any []) = > store.commit (eventName,... args)} component

/ / store/index.tsimport {createStore} from'.. / sky-vuex/index'export default createStore ({state: {age: 18}, mutations: {setAge (state: any, data: number) {state.age = data}},}) / / Home.vue modify data {{state.age} import {defineComponent} from 'vue'import {useStore, mapActions MapMutations} from'@ / sky-vuex/index'export default defineComponent ({name: 'Home', setup () {const store = useStore () const handleAge = mapMutations (' setAge') / / const handleAge = mapActions ('setAge') / / const handleAge = () = > {/ / store.dispatch (' setAge', 5) / /} return {state: store.state, handleAge,}} }) these are all the contents of the article "how vue3 uses provide to implement state management" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.