新聞中心
這篇文章主要介紹了vuex中的Getter如何用的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vuex中的Getter如何用文章都會(huì)有所收獲,下面我們一起來看看吧。
喀左ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書未來市場(chǎng)廣闊!成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:13518219792(備注:SSL證書合作)期待與您的合作!
前言
Vuex 允許我們?cè)?store 中定義“getter”(可以認(rèn)為是 store 的計(jì)算屬性)。就像計(jì)算屬性一樣,getter 的返回值會(huì)根據(jù)它的依賴被緩存起來,且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。
以官網(wǎng)的例子來說明,官網(wǎng)代碼如下:
在組件中使用以下代碼訪問:
this.$store.getters.doneTodosCount
一、說明
getters中的訪問器函數(shù),默認(rèn)會(huì)傳遞2個(gè)參數(shù)(state, getters),使用第一個(gè)參數(shù)state可以訪問數(shù)據(jù),使用getters參數(shù)可以訪問訪問器中的其它訪問器函數(shù)。大部分情況下只需要使用第一個(gè)參數(shù),定義訪問器函數(shù)就只寫第一個(gè)參數(shù)即可,就像上面的例子。訪問這些訪問器屬性時(shí),就像是組件中的計(jì)算屬性一樣調(diào)用,而不是像函數(shù)調(diào)用一樣。
這是有第二個(gè)參數(shù)getters時(shí)的使用例子,在組件中直接使用下面的代碼調(diào)用,就像調(diào)用計(jì)算屬性一樣。第2個(gè)參數(shù)系統(tǒng)會(huì)默認(rèn)傳遞。
this.$store.getters.doneTodos
二、getter返回一個(gè)函數(shù)
通過讓 getter 返回一個(gè)函數(shù),來實(shí)現(xiàn)給 getter 傳參。因此它的主要作用是傳遞參數(shù)。
在組件中直接訪問 this.$store.getters.getTodoById時(shí),返回的是一個(gè)函數(shù)。然后再進(jìn)行函數(shù)調(diào)用的方式傳遞參數(shù)進(jìn)去,就得到了函數(shù)的結(jié)果。
三、使用mapGetters 對(duì)象展開
在組件的計(jì)算屬性中,直接使用以下方式,可以很方便的引用getter屬性,然后就像調(diào)用普通的計(jì)算屬性一樣的使用。
如果你想將一個(gè) getter 屬性另取一個(gè)名字,使用對(duì)象形式:
這些知識(shí)點(diǎn),光看文檔有時(shí)候會(huì)很難理解,手動(dòng)實(shí)踐一下,會(huì)很容易的消化理解。
vuex getter傳參方法
getters: { getProductByid: (state) => (id) => { return state.productList.find(item => item.id === id); } }
在使用了namespace的情況下調(diào)用:
this.$store.getters['yournamespace/getProductByid'](id);
在未使用namespace的情況下調(diào)用:
this.$store.getters.getProductByid(id);
關(guān)于“vuex中的Getter如何用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“vuex中的Getter如何用”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目:vuex中的Getter如何用
網(wǎng)站網(wǎng)址:http://www.dlmjj.cn/article/ppsisg.html