對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解
getter這個(gè)概念其實(shí)我們寫(xiě)的時(shí)候感覺(jué)好像和Mutations修改狀態(tài)一樣，實(shí)際上它們是有區(qū)別的：
getters比較死板，如果你的百度錢(qián)包只有在金額為100才能提現(xiàn)，那么你在寫(xiě)提現(xiàn)頁(yè)面，它是早已固定好的，而Mutation不一樣，當(dāng)你點(diǎn)擊百度錢(qián)包提現(xiàn)，你哪怕是一元，它只要你點(diǎn)擊了便可以提現(xiàn)，而且getters它是不需要什么點(diǎn)擊，它就存在，只要你寫(xiě)了，這是什么意思，就是說(shuō)假設(shè)你百度錢(qián)包為0，你存在了getter它就有100元，而你如果寫(xiě)許多百度經(jīng)驗(yàn)，百度再次發(fā)紅包0.5元時(shí)它就是100+0.5+100
下面我具體介紹它的用法
第一步 在store.js里用const聲明我們的getters屬性
代碼如下：
const getters={
num:function(state){
return state.num+=100;
}
}
注:如果讀者不知道store.js就是我們寫(xiě)vuex共用的js
第二步 在Vuex.Store()里引入getter
代碼如下:
export default new Vuex.Store({
state,
mutations,
getters,/*只關(guān)注此欄*/
actions
})
第三步 在你自己創(chuàng)建的組件例如a.vue中computed里面進(jìn)行配置
<script>
import store from '@/store'
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
}
},
computed:{
/*只關(guān)注此欄這里面采用es6的拓展運(yùn)算符*/
...mapState(["num"]),
num(){
return this.$store.getters.num;
}
},
store
}
</script>
注：如果你不了解es6的運(yùn)算符也沒(méi)關(guān)系，你只要知道在里面無(wú)論你寫(xiě)多少state變量都沒(méi)關(guān)系即可，包括getter的方法等等，再次要注意return一定要寫(xiě)否則報(bào)錯(cuò)。
第四步 在你自己創(chuàng)建的模板中引入測(cè)試代碼
代碼如下：
<div>
{{num}}
</div>
你看一下num為多少？
注：
store.js補(bǔ)充部分:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//狀態(tài)對(duì)象
num:0,
},
const getters={
age:function(state){
return state.num+=100;
},
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
注:如果你看到了100,那就說(shuō)明你成功，然后你在你自己創(chuàng)建的模板中試一試加一個(gè)button點(diǎn)擊事件再次觀察結(jié)果看看
代碼補(bǔ)充部分如下：
1）在store.js中添加如下代碼
const mutations={//觸發(fā)狀態(tài)
jia(state){
state.num+=0.5
},
}
2）在你自己的組件a.vue中添加如下代碼
模板部分：
<div>
{{num}}
</div>
<button @click="jia">+</button>
</div>
script部分：
methods:mapMutations([
'jia',
]),
觀察結(jié)果如果為200.5則成功。
以上這篇對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近在研究Vue的組件庫(kù),之前也用過(guò)$attrs和$listeners,官方文檔描述的不太詳細(xì),也沒(méi)有太好的例子,下面這篇文章主要給大家介紹了關(guān)于Vue中$attrs和$listeners詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題)
項(xiàng)目全線使用vue3的時(shí)候,自然使用的是配套更加契合的vite打包工具,于是自然而然會(huì)用到很多新的語(yǔ)法,本文給大家介紹了vue3+vite實(shí)現(xiàn)低版本瀏覽器兼容的解決方案(出現(xiàn)白屏問(wèn)題),需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細(xì)介紹了Vue-Quill-Editor富文本編輯器的使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要介紹了Vue路由切換頁(yè)面不更新問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue簡(jiǎn)單實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)單實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
示例vue 的keep-alive緩存功能的實(shí)現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue通過(guò)vue-lazyload實(shí)現(xiàn)圖片懶加載的代碼詳解
這篇文章主要給大家介紹了vue通過(guò)vue-lazyload實(shí)現(xiàn)圖片懶加載,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
Vuex 的 store 接受 plugins 選項(xiàng)，這個(gè)選項(xiàng)暴露出每次 mutation 的鉤子。Vuex 插件就是一個(gè)函數(shù)，這篇文章主要介紹了vuex 中插件的編寫(xiě)案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇Vue通過(guò)ref父子組件拿值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09