If you are using , then I think you may be crashing with communication between vue components.
I encountered this problem when I was developing a website using the 2.0-based UI framework ElementUI: There are many forms on a page, and I tried to write the form into a single file component, but when the data in the form (child component) interacts with the page (parent component) buttons, the communication between them is very troublesome:
<!--Introduce child components into parent components-->
<template>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="show = true">Click</a>
<t-dialog :="show"></t-dialog>
</div>
</template>
<script>
import dialog from './components/'
export default {
data(){
return {
show:false
}
},
components:{
"t-dialog":dialog
}
}
</script>
<!--Subcomponents-->
<template>
<el-dialog :="currentShow"></el-dialog>
</template>
<script>
export default {
props:['show'],
computed:{
currentShow:{
get(){
return
},
set(val){
this.$emit("update:show",val)
}
}
}
}
</script>
The reason why it is so troublesome is that the parent component can pass parameters to the child component through props, but the child component cannot directly modify the parameters passed by the parent component.
At this time, using vuex can solve this problem more easily:
<!--Introduce child components into parent components-->
<template>
<div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="$ = true">Click</a>
<t-dialog></t-dialog>
</div>
</template>
<script>
import dialog from './components/'
export default {
components:{
"t-dialog":dialog
}
}
</script>
<!--Subcomponents-->
<template>
<el-dialog :="$"></el-dialog>
</template>
<script>
export default {}
</script>
Is it much more convenient? This is the simplest application of vuex. Don’t be scared by other tutorials on the Internet. vuex can be that simple!
Install and use vuex
First, we install vuex in the 2.0 development environment:
npm install vuex --save
Then, add in :
import vuex from 'vuex'
(vuex);
var store = new ({//store object state:{
show:false
}
})
Then, add the store object when instantiating the Vue object:
new Vue({
el: '#app',
router,
store,//Use the store template: '<App/>',
components: { App }
})
After completing this step, $ in the above example can be used.
modules
For convenience, we wrote the store object in it, but in fact, in order to facilitate future maintenance, we can write it separately better. We create a new store folder in the src directory, and then create a new one in it:
import Vue from 'vue'
import vuex from 'vuex'
(vuex);
export default new ({
state:{
show:false
}
})
Then the corresponding code in it should be changed to:
//vuex
import store from './store'
new Vue({
el: '#app',
router,
store,//Use the store template: '<App/>',
components: { App }
})
This separates the store. Then there is another problem: Here, no matter which component you can use, then after there are too many components, there are also more states. So many states are piled in the store folder. What should I do if I cannot maintain it?
We can use vuex modules to change the store folder to:
import Vue from 'vue'
import vuex from 'vuex'
(vuex);
import dialog_store from '../components/dialog_store.js';//Introduce a store object
export default new ({
modules: {
dialog: dialog_store
}
})
Here we refer to a dialog_store.js , in this js file we can write the status of the dialog component separately:
export default {
state:{
show:false
}
}
After making such a modification, we can change all the $ we used before to $.
If there are other components that need to use vuex, create a corresponding status file and add them to modules in the file under the store folder.
modules: {
dialog: dialog_store,
other: other,//Other components}
mutations
In the dialog example we mentioned earlier, we only have one $ and one state in dependence on vuex, but if we want to perform an operation and need to rely on many states, it will be troublesome to manage it!
Mutations appears, the problem is solved:
export default {
state:{//state
show:false
},
mutations:{
switch_dialog(state){//The state here corresponds to the state above = ?false:true;
//You can also perform other operations here to change the state }
}
}
After using mutations , our parent component can be changed to:
<template>
<div >
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="$('switch_dialog')">Click</a>
<t-dialog></t-dialog>
</div>
</template>
<script>
import dialog from './components/'
export default {
components:{
"t-dialog":dialog
}
}
</script>
Use $('switch_dialog') to trigger the switch_dialog method in mutations.
What needs to be noted here is:
1. The methods in mutations are not divided into components. If you define them in the dialog_stroe.js file
switch_dialog method, a switch_dialog method in other files, then
$('switch_dialog') executes all switch_dialog methods.
2. The operations in mutations must be synchronous.
You must be curious about what will happen if you perform asynchronous operations in mutations. In fact, nothing strange will happen. It is just an official recommendation. Don't perform asynchronous operations in mutations.
actions
Multiple state operations, using mutations will trigger them, which will be easier to maintain. Then, if you need to execute multiple mutations, you need to use action:
export default {
state:{//state
show:false
},
mutations:{
switch_dialog(state){//The state here corresponds to the state above = ?false:true;
//You can also perform other operations here to change the state }
},
actions:{
switch_dialog(context){//The context here has the same object and method as the $store we use ('switch_dialog');
//You can also trigger other mutation methods here },
}
}
So, in the previous parent component, we need to make modifications to trigger the switch_dialog method in the action:
<template>
<div >
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="$('switch_dialog')">Click</a>
<t-dialog></t-dialog>
</div>
</template>
<script>
import dialog from './components/'
export default {
components:{
"t-dialog":dialog
}
}
</script>
Use $('switch_dialog') to trigger the switch_dialog method in action.
Official recommendation: put asynchronous operations in action.
getters
getters is similar to computed in vue, both of which are used to calculate state and then generate new data (state).
As for 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.$;
}
}
So, if this state that is exactly the opposite of show is needed in many components, then we need to write many not_shows and use getters to solve this problem:
export default {
state:{//state
show:false
},
getters:{
not_show(state){//The state here corresponds to the state above return !;
}
},
mutations:{
switch_dialog(state){//The state here corresponds to the state above = ?false:true;
//You can also perform other operations here to change the state }
},
actions:{
switch_dialog(context){//The context here has the same object and method as the $store we use ('switch_dialog');
//You can also trigger other mutation methods here },
}
}
We use $ in the component to get the state show , and similarly, we can use $.not_show to get the state not_show .
Note: The value of $.not_show cannot be modified directly, and the corresponding state needs to change before it can be modified.
mapState、mapGetters、mapActions
Many times, the writing method of $ and $('switch_dialog') is long and smelly, which is very inconvenient. When we are not using vuex, we only need to obtain a state and execute a method only need this.switch_dialog. Using vuex makes the writing method complicated?
Using mapState, mapGetters, mapActions will not be so complicated.
Take mapState as an example:
<template>
<el-dialog :="show"></el-dialog>
</template>
<script>
import {mapState} from 'vuex';
export default {
computed:{
//The three points here are called: extension operator ...mapState({
show:state=>
}),
}
}
</script>
Equivalent to:
<template>
<el-dialog :="show"></el-dialog>
</template>
<script>
import {mapState} from 'vuex';
export default {
computed:{
show(){
return this.$;
}
}
}
</script>
mapGetters, mapActions and mapState are similar. mapGetters are generally written in computed, and mapActions are generally written in methods.
If you understand the above, you can read the vuex documentation, and you should be able to understand it.
The above is the most detailed content of Vuex introduction. For more information about Vuex introduction knowledge points, please pay attention to my other related articles!