getter這個概念其實我們寫的時候感覺好像和Mutations修改狀態一樣，實際上它們是有區別的：
getters比較死板，如果你的百度錢包只有在金額為100才能提現，那么你在寫提現頁面，它是早已固定好的，而Mutation不一樣，當你點擊百度錢包提現，你哪怕是一元，它只要你點擊了便可以提現，而且getters它是不需要什么點擊，它就存在，只要你寫了，這是什么意思，就是說假設你百度錢包為0，你存在了getter它就有100元，而你如果寫許多百度經驗，百度再次發紅包0.5元時它就是100+0.5+100
下面我具體介紹它的用法
第一步 在store.js里用const聲明我們的getters屬性
代碼如下：
const getters={
num:function(state){
return state.num+=100;
}
}
注:如果讀者不知道store.js就是我們寫vuex共用的js
第二步 在Vuex.Store()里引入getter
代碼如下:
export default new Vuex.Store({
state,
mutations,
getters,/*只關注此欄*/
actions
})
第三步 在你自己創建的組件例如a.vue中computed里面進行配置
<script>
import store from '@/store'
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
}
},
computed:{
/*只關注此欄這里面采用es6的拓展運算符*/
...mapState(["num"]),
num(){
return this.$store.getters.num;
}
},
store
}
</script>
注：如果你不了解es6的運算符也沒關系，你只要知道在里面無論你寫多少state變量都沒關系即可，包括getter的方法等等，再次要注意return一定要寫否則報錯。
第四步 在你自己創建的模板中引入測試代碼
代碼如下：
<div>
{{num}}
</div>
你看一下num為多少？
注：
store.js補充部分:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//狀態對象
num:0,
},
const getters={
age:function(state){
return state.num+=100;
},
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
注:如果你看到了100,那就說明你成功，然后你在你自己創建的模板中試一試加一個button點擊事件再次觀察結果看看
代碼補充部分如下：
1）在store.js中添加如下代碼
const mutations={//觸發狀態
jia(state){
state.num+=0.5
},
}
2）在你自己的組件a.vue中添加如下代碼
模板部分：
<div>
{{num}}
</div>
<button @click="jia">+</button>
</div>
script部分：
methods:mapMutations([
'jia',
]),
觀察結果如果為200.5則成功。
以上這篇對vuex中getters計算過濾操作詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
