Shulou(Shulou.com)05/31 Report--

This article mainly explains "vuex use case Analysis". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "vuex usage case Analysis".

When I was developing a website using the UI framework ElementUI based on vue.js 2.0, I encountered this problem: there were many forms on a page, and I tried to write the form as a single-file component, but when the data in the form (child component) interacted with the page (parent component) button, the communication between them was troublesome:

Click import dialog from'. / components/dialog.vue'export default {data () {return {show:false}}, components: {"t-dialog": dialog}} export default {props: ['show'], computed: {currentShow: {get () {return this.show}, set (val) {this.$emit ("update:show", val)}

The reason for this trouble is that the parent component can pass parameters to the child component through props, but the parameters passed by the parent component cannot be directly modified within the child component.

At this time, it is convenient to use vuex to solve this problem:

Click import dialog from'. / components/dialog.vue'export default {components: {"t-dialog": dialog}} export default {}

Is it much more convenient? this is the simplest application of vuex. Don't be frightened by other tutorials on the Internet. Vuex can be so simple!

Install and use vuex

First, let's install vuex in the vue.js 2.0 development environment:

Npm install vuex-save

Then, add the following to main.js:

Import vuex from 'vuex'Vue.use (vuex); var store = new vuex.Store ({/ / store object state: {show:false}})

Then, add the store object when you instantiate the Vue object:

New Vue ({el:'# app', router, store,// uses store template:', components: {App}})

When this is done, the $store.state.show in the above example is ready to use.

Modules

For convenience, we wrote the store object in main.js, but in fact, for future maintenance, it is better to write separately. We create a new store folder under the src directory, and then create a new index.js in it:

Import Vue from 'vue'import vuex from' vuex'Vue.use (vuex); export default new vuex.Store ({state: {show:false}})

Accordingly, the code in main.js should be changed to:

/ / vueximport store from'. / store'new Vue ({el:'# app', router, store,// uses store template:', components: {App}})

This separates the store, so there is another problem: any component of the $store.state.show here can be used, and after there are more components, there will be more states, and what if the index.js with so many states stacked in the store folder is difficult to maintain?

We can use vuex's modules to change the index.js under the store folder to:

Import Vue from 'vue'import vuex from' vuex'Vue.use (vuex); import dialog_store from'.. / components/dialog_store.js';// introduces a store object export default new vuex.Store ({modules: {dialog: dialog_store}})

Here we reference a dialog_store.js, and in this js file we can write the state of the dialog component separately:

Export default {state: {show:false}}

After making such a change, we can change all the $store.state.show we used before to $store.state.dialog.show.

If there are other components that need to use vuex, create a corresponding status file and add them to modules in the index.js file in the store folder.

Modules: {dialog: dialog_store, other: other components of other,//}

Mutations

In the dialog example we mentioned earlier, our dependence on vuex is only one $store.state.dialog.show one state, but if we want to perform an operation, we need to rely on many states, which is troublesome to manage!

When mutations takes the stage, the problem is easily solved:

Export default {state: {/ / state show:false}, mutations: {switch_dialog (state) {/ / the state here corresponds to the above state state.show = state.show?false:true; / / you can also perform other operations here to change state}

After using mutations, our original parent component can be changed to:

Click import dialog from'. / components/dialog.vue'export default {components: {"t-dialog": dialog}}

Use $store.commit ('switch_dialog') to trigger the switch_dialog method in mutations.

What needs to be noted here is:

1. The method in mutations is independent of components, if you define it in the dialog_stroe.js file

Switch_dialog method, a switch_dialog method in other files, then

$store.commit ('switch_dialog') executes all switch_dialog methods.

2. The operations in mutations must be synchronous.

You must be curious about what happens if you perform asynchronous operations in mutations. In fact, nothing strange will happen, but it is officially recommended not to perform asynchronous operations in mutationss.

Actions

For multiple state operations, using mutations to trigger will be easier to maintain, so you need to use action if you need to execute multiple mutations:

Export default {state: {/ / state show:false}, mutations: {switch_dialog (state) {/ / the state here corresponds to the above state state.show = state.show?false:true / / you can also perform other operations here to change state}, actions: {switch_dialog (context) {/ / the context here has the same object and method context.commit ('switch_dialog') as the $store we use; / / you can also trigger other mutations methods here},}}

So, in the previous parent component, we need to make changes to trigger the switch_dialog method in action:

Click import dialog from'. / components/dialog.vue'export default {components: {"t-dialog": dialog}}

Use $store.dispatch ('switch_dialog') to trigger the switch_dialog method in action.

It is officially recommended that asynchronous operations be placed in action.

Getters

Getters is similar to computed in vue in that it is used to calculate state and generate new data (state).

Again, in the previous example, if we need a state that is exactly the opposite of the state show, we can calculate it like this using computed in vue:

Computed () {not_show () {return! this.$store.state.dialog.show;}}

So, if you need to use this opposite state of show in many components, then you need to write a lot of not_show, and using getters can solve this problem:

Export default {state: {/ / state show:false}, getters: {not_show (state) {/ / the state here corresponds to the above state return! state.show;}}, and mutations: {switch_dialog (state) {/ / the state here corresponds to the above state state.show = state.show?false:true / / you can also perform other operations here to change state}}, actions: {switch_dialog (context) {/ / the context here has the same object and method context.commit ('switch_dialog') as the $store we use; / / you can also trigger other mutations methods here},}}

We use $store.state.dialog.show in the component to get the status show, and similarly, we can use $store.getters.not_show to get the status not_show.

Note: the value of $store.getters.not_show cannot be modified directly, and the corresponding state needs to be changed.

MapState 、 mapGetters 、 mapActions

Most of the time, the writing of $store.state.dialog.show and $store.dispatch ('switch_dialog') is long and smelly, and it is very inconvenient. When we are not using vuex, we only need this.show to get a state and this.switch_dialog to execute a method. Using vuex makes the writing more complicated.

Using mapState, mapGetters, and mapActions won't be so complicated.

Take mapState as an example:

Import {mapState} from 'vuex';export default {computed: {/ / the three points here are called extension operators... mapState ({show:state= > state.dialog.show}),}}

Equivalent to:

Import {mapState} from 'vuex';export default {computed: {show () {return this.$store.state.dialog.show;}

MapGetters, mapActions, and mapState are similar. MapGetters is generally written in computed, and mapActions is generally written in methods.

At this point, I believe you have a deeper understanding of the "vuex use case analysis", you might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.