對vuex中g(shù)etters計算過濾操作詳解
getter這個概念其實我們寫的時候感覺好像和Mutations修改狀態(tài)一樣，實際上它們是有區(qū)別的：
getters比較死板，如果你的百度錢包只有在金額為100才能提現(xiàn)，那么你在寫提現(xiàn)頁面，它是早已固定好的，而Mutation不一樣，當(dāng)你點擊百度錢包提現(xiàn)，你哪怕是一元，它只要你點擊了便可以提現(xiàn)，而且getters它是不需要什么點擊，它就存在，只要你寫了，這是什么意思，就是說假設(shè)你百度錢包為0，你存在了getter它就有100元，而你如果寫許多百度經(jīng)驗，百度再次發(fā)紅包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,/*只關(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的拓展運算符*/
...mapState(["num"]),
num(){
return this.$store.getters.num;
}
},
store
}
</script>
注：如果你不了解es6的運算符也沒關(guān)系，你只要知道在里面無論你寫多少state變量都沒關(guān)系即可，包括getter的方法等等，再次要注意return一定要寫否則報錯。
第四步 在你自己創(chuàng)建的模板中引入測試代碼
代碼如下：
<div>
{{num}}
</div>
你看一下num為多少？
注：
store.js補充部分:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={//狀態(tài)對象
num:0,
},
const getters={
age:function(state){
return state.num+=100;
},
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
注:如果你看到了100,那就說明你成功，然后你在你自己創(chuàng)建的模板中試一試加一個button點擊事件再次觀察結(jié)果看看
代碼補充部分如下：
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則成功。
以上這篇對vuex中g(shù)etters計算過濾操作詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
v-show和v-if的區(qū)別?及應(yīng)用場景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場景，vue中v-show與?v-if的作用效果是相同的，都能控制元素在頁面是否顯示，但是也有一定的區(qū)別，下面文章梳理總結(jié)v-show和v-if的區(qū)別，需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了解決微信瀏覽器緩存站點入口文件(IIS部署Vue項目),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
利用vue重構(gòu)有贊商城的思路以及總結(jié)整理
這篇文章主要介紹了利用vue重構(gòu)有贊商城的思路以及總結(jié)整理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
在 Vue3 中,setup 函數(shù)是一個新引入的概念,它代替了之前版本中的 data、computed、methods 等選項,用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理2024-02-02
這篇文章主要介紹了通過Vue實現(xiàn)淘寶購物車中三級選中的功能，文中的實現(xiàn)過程講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
Vue.js 中 ref 和 reactive 的區(qū)別及用法解析
在Vue.js中,ref主要用于創(chuàng)建響應(yīng)式的引用,通過.value屬性來訪問和修改值,特別適用于需要頻繁更改整個值的場景,而reactive則用于創(chuàng)建深度響應(yīng)的對象或數(shù)組,本文給大家介紹Vue.js 中 ref 和 reactive 的區(qū)別及用法,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue+Openlayers實現(xiàn)實時坐標(biāo)點展示
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers實現(xiàn)實時坐標(biāo)點展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本文將演示如何使用Vue?3實現(xiàn)一個簡單的密碼強度檢測功能,通過實時反饋,幫助用戶創(chuàng)建更安全的密碼,從而提升整體系統(tǒng)的安全性,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了詳解新手使用vue-router傳參時注意事項，詳細(xì)的介紹了幾種常見錯誤，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05