In fact, when we write the concept of getter, it feels like the same as Mutations modifying the state, but in fact there is a difference:
getters is relatively rigid. If your Baidu wallet can withdraw cash only if the amount is 100, then you are writing the withdrawal page, and it has been fixed long ago, while Mutation is different. When you click on Baidu wallet to withdraw cash, even if it is one yuan, it can withdraw cash as long as you click. And getters does not require any clicks, it exists. As long as you write, what does this mean? That is to say, if your Baidu wallet is 0, you have a getter, it will have 100 yuan. If you write a lot of Baidu experience, when Baidu sends a red envelope of 0.5 yuan again, it will be 100+0.5+100.
Next I will introduce its usage in detail
first stepDeclare our getters property with const
The code is as follows:
const getters={
num:function(state){
return +=100;
}
}
Note: If the reader doesn't know, we write the js shared by vuex
Step 2Introduce getter in ()
The code is as follows:
export default new ({
state,
mutations,
getters,/*Follow this column only*/
actions
})
Step 3Configure the components you created yourself, such as computed
<script>
import store from '@/store'
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
}
},
computed:{
/*Only pay attention to this column, the extension operator of es6 is used*/
...mapState(["num"]),
num(){
return this.$;
}
},
store
}
</script>
Note: It doesn't matter if you don't understand the es6 operator. You just need to know that no matter how many state variables you write in it, it doesn't matter, including the getter method, etc. Again, you must be careful to write the return, otherwise an error will be reported.
Step 4Introduce test code into templates you create
The code is as follows:
<div>
{{num}}
</div>
Look at what num is?
Note:
Supplementary section:
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const state={//Status Object
num:0,
},
const getters={
age:function(state){
return +=100;
},
export default new ({
state,
mutations,
getters,
actions
})
Note: If you see 100, it means you succeed. Then try adding a button to the template you created yourself to watch the result again
The code supplementary part is as follows:
1) Add the following code in
const mutations={//Trigger status
jia(state){
+=0.5
},
}
2) Add the following code to your own component
Template section:
<div>
{{num}}
</div>
<button @click="jia">+</button>
</div>
script part:
methods:mapMutations([
'jia',
]),
If the observation is 200.5, it will be successful.
The above detailed explanation of getters calculation and filtering operations in vuex is all the content I share with you. I hope you can give you a reference and I hope you can support me more.