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

This article introduces the relevant knowledge of "what are the advantages of how to use Vue 3.0". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Do you need status sharing?

In some cases, the flow of data between multiple components becomes very difficult, so centralized state management is required. These situations include:

Multiple components use the same data

Components are deeply nested

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 direct answer is to use Vuex. This is a time-tested solution, and it works well.

But what if you don't want to add other dependencies or find the settings too complex? The new version of Vue3 and Composition API can solve these problems through their built-in methods.

New solution

The sharing status must meet two conditions:

Responsive: when states change, the components that use them should also be updated

Availability: status can be accessed in any component

Responsive type

Vue3 exposes its responsive system through a number of functions. You can use the reactive function to create responsive 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 renders again when the response value changes.

{{state.counter}} Increment import {reactive} from 'vue'; export default {setup () {const state = reactive ({counter: 0}); return {state};}; availability

The above example is useful for a single component, but no other component can access the state. To overcome this problem, you can use provide and inject methods to make any finger in the Vue 3 application 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 the provide method, any child component of the method can use that value. When Symbol provides and retrieves values, key uses the same name.

In this way, if you provide a value on the top-most 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'); import {useState} from'. / state'; export default {setup () {return {state: useState ()};}}

Make the code more robust

The above solution works, but there is one drawback: 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 it. It overrides the variables passed in the Proxy object, which blocks any modifications (warning when attempting to modify). These changes can be handled by separate functions that have access to 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 be able to access the read-only state, and only the exported function can modify the writable state.

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

This is the end of "what are the advantages of how to use Vue 3.0". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.