vuex中g(shù)etters的基本用法解讀
getters的基本用法解讀
一、getter 定義
Vuex允許我們?cè)趕tore中定義"getter" ，用于對(duì)state中存儲(chǔ)的數(shù)據(jù)進(jìn)行過(guò)濾操作。
就像vue生命周期中的computed一樣，getter的返回值 會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算
二、使用方法
1、通過(guò)屬性訪問(wèn)
Getter 接受 state 作為其第一個(gè)參數(shù)：
example:現(xiàn)在需要獲取list：[1,2,3,4,5,6,7,8,9]中大于5的元素
const store = new Vuex.Store({
? ?state:{
? ? ? ?list: [1,2,3,4,5,6,7,8,9]
? ? ? ?} ,
? ? getters: {
? ? ? ? getNumber: state => {
? ? ? ? ? ? retrun state.list.filter(item => item > 5)
? ? ? ? }
? ? } ??
})在.vue中使用
computed:{
? ? getNumber(){
? ? ? ? return this.$store.getters.getNumber
? ? }
}2、通過(guò)方法訪問(wèn)
同樣的數(shù)組list 需要根據(jù)不同的條件返回不同的數(shù)據(jù)
通過(guò)讓 getter 返回一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)給 getter 傳參
const store = new Vuex.Store({
? ?state:{
? ? ? ?list: [1,2,3,4,5,6,7,8,9]
? ? ? ?} ,
? ? getters: {
? ? ? ? getNumber: state => (index) => {
? ? ? ? ? ? return state.list.filter(item => item > index)
? ? ? ? }
? ? } ??
})在.vue中使用
computed:{
? ? getNumber(){
? ? ? ? return this.$store.getters.getNumber(4)
? ? }
}3、依賴于已存在的getters
example: 獲取list中大于5的數(shù)字的個(gè)數(shù)
注意：如果getters返回的是一個(gè)方法，不能用這種方式
const store = new Vuex.Store({
? ?state:{
? ? ? ?list: [1,2,3,4,5,6,7,8,9]
? ? ? ?} ,
? ? getters: {
? ? ? ? getNumber: state => {
? ? ? ? ? ? return state.list.filter(item => item > 6)
? ? ? ? },
? ? ? ? getNumberLength: (state, getters) = > {
? ? ? ? ? ? return getters.getNumber.length
? ? ? ? }
? ? } ??
})三、mapGetters輔助函數(shù)
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：
import { mapGetters } from 'vuex'
export default {
? // ...
? computed: {
? // 使用對(duì)象展開(kāi)運(yùn)算符將 getter 混入 computed 對(duì)象中
? ? ...mapGetters([
? ? ? 'doneTodosCount',
? ? ? 'anotherGetter',
? ? ? // ...
? ? ])
? }
}如果你想將一個(gè) getter 屬性另取一個(gè)名字，使用對(duì)象形式：
import { mapGetters } from 'vuex'
export default {
? // ...
? computed: {
? ? ...mapGetters({
? ? // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
? ? doneCount: 'doneTodosCount'
? ? })
? }
}四、getters注意事項(xiàng)
1、data中定義的屬性名稱不能和computed中定義的getter名稱相同，否則會(huì)報(bào)錯(cuò)
2、vuex中state和getter中可以定義同名屬性，互不干擾
getters的兩種調(diào)用方法
getters和state用法相似，有點(diǎn)像vue中里面的data 和computed兩個(gè)之間的關(guān)系
使用：
state: {
?? ??? ?count:0,
?? ?},?? ?
getters:{
?? ??? ?countAdd(state){
?? ??? ??? ?return state.count + 1
?? ??? ?}
?? ?},方法一
this.$store.getters.xxx?
xxx是getters里面的名稱
方法二
import { mapGetters } from 'vuex'
.....
computed:{
? ? ...mapGetters(['countAdd'])
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue3和Vite實(shí)現(xiàn)對(duì)低版本瀏覽器的兼容
在使用Vite和Vue3構(gòu)建的JavaScript項(xiàng)目中,確保對(duì)低版本瀏覽器的兼容性是一個(gè)重要的考慮因素,以下是一些具體的解決方案和步驟,可以幫助你實(shí)現(xiàn)這一目標(biāo),需要的朋友可以參考下2024-11-11
Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
這篇文章主要介紹了vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來(lái)和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10
一步步教你搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境
這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個(gè)人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下2023-07-07
vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例
本文主要介紹了vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理
這篇文章主要介紹了基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法
這篇文章主要介紹了Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下2018-10-10