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

This article mainly introduces the relevant knowledge of "vue state management case analysis". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope this "vue state management case analysis" article can help you solve the problem.

Scene: a map application with a sidebar with many options. When the options change, the app will request data according to the conditions of the sidebar and put markers on the map. The page can be simply abstracted into the following structure:

/ / App.vue

There are many ways to accomplish the above requirements. I'll introduce two common practices first, and then come up with a more alternative but interesting solution.

1. Go directly to vuex

Generally speaking, when there are multiple components sharing state, it is a good idea to leave the shared state to vuex. But when dealing with the above scenario, it will be a bit "clunky" because the sidebar is actually a form, and if you use vuex, you need to define a set of mutation for each option, losing the convenience of using v-model directly.

Bind an option directly using the component state

/ / sidebar.vue

/ /...

Data () {

Return {

Message:''

}

}

When using vuex to bind an option, there is a lot of "template" code

/ / define state, mutation

State: {

Message:''

}

Mutations: {

UpdateMessage (state, message) {

State.message = message

}

}

/ / sidebar.vue

/ /...

Computed: {

... mapState ({

Message: state = > state.message

})

}

Methods: {

UpdateMessage (e) {

This.$store.commit ('updateMessage', e.target.value)

}

}

two。 Put the state on the parent component

If sidebar and map have a common parent, it will be much easier to deal with in this way than above. However, when our applications become larger and larger, we tend to split sidebar and map into smaller components, so it will be very troublesome to transfer them to sub-components layer by layer through props.

3. Share the status of the component

We usually write the state within the component in the following form:

/ /...

Data () {

Return {

Message:''

}

}

In fact, we can extract the object returned in data () {} separately as a variable, like this:

Const state = {message:''}

/ /...

Data () {

Return state

}

So during the initialization of this component, the state object will be "formatted" by vue, which leads to an interesting thing: any component, as long as state.message is used in the template, the page will be updated synchronously when the state.message changes.

Knowing this, we can write the status of the sidebar into a separate file and introduce it into other components as a module, with the following structure:

/ / state.js

Export default {message:''}

/ / sidebar.vue

Import state from 'path/to/state.js'

/ /...

Data () {

Return {state}

}

/ / map.vue

/ / the status of using the sidebar in the template

{{state.message}}

Import state from 'path/to/state.js'

/ /...

Data () {

Return {state}

}

Created () {

/ / use the status of the sidebar as a parameter to request data

Axios.get ('/ xxxx', {params: state})

}

One advantage of this is that you can treat state as an "internal" state in sidebar.vue, happily use v-model to bind data, and easily get state as a parameter request in map.vue. At the same time, you can also use state.message-- directly in the template of map.vue.

further more

In the above scenario, state "response formalization" occurs in the process of subcomponent initialization, and I hope to take the initiative to complete this step at some point when the application starts. At this point, you can use the Vue constructor, like this:

/ / store.js

Import state from 'path/to/state.js'

New Vue ({

Data: {

State

}

})

Then introducing store.js,state into the main file main.js will be "responsive".

This is the end of the introduction to "vue State Management case Analysis". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.