Vuex之理解Getters的用法實(shí)例
1.什么是getters
在介紹state中我們了解到，在Store倉(cāng)庫(kù)里，state就是用來(lái)存放數(shù)據(jù)，若是對(duì)數(shù)據(jù)進(jìn)行處理輸出，比如數(shù)據(jù)要過(guò)濾，一般我們可以寫到computed中。但是如果很多組件都使用這個(gè)過(guò)濾后的數(shù)據(jù)，比如餅狀圖組件和曲線圖組件，我們是否可以把這個(gè)數(shù)據(jù)抽提出來(lái)共享？這就是getters存在的意義。我們可以認(rèn)為，【getters】是store的計(jì)算屬性。
２.如何使用
定義：我們可以在store中定義getters，第一個(gè)參數(shù)是state
const getters = {style:state => state.style}
傳參：定義的Getters會(huì)暴露為store.getters對(duì)象，也可以接受其他的getters作為第二個(gè)參數(shù)；
使用：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount}
3.mapGetters
mapGetters輔助函數(shù)僅僅是將store中的getters映射到局部計(jì)算屬性中，用法和mapState類似
import { mapGetters } from 'vuex'
computed: {
// 使用對(duì)象展開(kāi)運(yùn)算符將 getters 混入 computed 對(duì)象中
...mapGetters([
'doneTodosCount',
'anotherGetter',])}
//給getter屬性換名字
mapGetters({
// 映射 this.doneCount 為 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
4.源碼分析
wrapGetters初始化getters，接受3個(gè)參數(shù)，store表示當(dāng)前的Store實(shí)例，moduleGetters當(dāng)前模塊下所有的getters，modulePath對(duì)應(yīng)模塊的路徑
function `wrapGetters` (store, moduleGetters, modulePath) {
Object.keys(moduleGetters).forEach(getterKey => {
// 遍歷先所有的getters
const rawGetter = moduleGetters[getterKey]
if (store._wrappedGetters[getterKey]) {
console.error(`[vuex] duplicate getter key: ${getterKey}`)
// getter的key不允許重復(fù)，否則會(huì)報(bào)錯(cuò)
return
}
store._wrappedGetters[getterKey] = function `wrappedGetter` (store{
// 將每一個(gè)getter包裝成一個(gè)方法，并且添加到store._wrappedGetters對(duì)象中，
return rawGetter(
//執(zhí)行g(shù)etter的回調(diào)函數(shù)，傳入三個(gè)參數(shù)，(local state,store getters,rootState)
getNestedState(store.state, modulePath), // local state
//根據(jù)path查找state上嵌套的state
store.getters,
// store上所有的getters
store.state
// root state)}})
}
//根據(jù)path查找state上嵌套的state
function `getNestedState` (state, path) {
return path.length
? path.reduce((state, key) => state[key], state): state}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實(shí)現(xiàn)給某個(gè)數(shù)據(jù)字段添加顏色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
最近接手做一個(gè)前端小項(xiàng)目，基于vue實(shí)現(xiàn)答題功能，具體功能有判斷用戶是否答對(duì)，答對(duì)的話跳到下一題，答錯(cuò)的話彈窗告訴用戶有錯(cuò)題，請(qǐng)重新答題，功能非常人性化，對(duì)實(shí)現(xiàn)代碼感興趣的朋友一起看看吧2021-06-06
Vue.js?element-plus使用圖標(biāo)不顯示問(wèn)題的解決方式
近期在學(xué)習(xí)Vue時(shí)用elementUI時(shí)發(fā)現(xiàn)圖標(biāo)在頁(yè)面上顯示不出來(lái),所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標(biāo)不顯示問(wèn)題的解決方式,需要的朋友可以參考下2022-09-09
Vue3?watchEffect的使用教程和相關(guān)概念
Vue?3?引入了?Composition?API,其中?watchEffect?是一個(gè)非常強(qiáng)大的工具,用于響應(yīng)式地追蹤依賴項(xiàng)的變化,本文將詳細(xì)介紹?watchEffect?的使用方法和相關(guān)概念,文中有詳細(xì)的代碼供大家參考,需要的朋友可以參考下2024-08-08
vue3?+?async-validator實(shí)現(xiàn)表單驗(yàn)證的示例代碼
表單驗(yàn)證可以有效的過(guò)濾不合格的數(shù)據(jù)，減少服務(wù)器的開(kāi)銷，并提升用戶的使用體驗(yàn)，今天我們使用?vue3?來(lái)做一個(gè)表單驗(yàn)證的例子，需要的朋友跟隨小編一起學(xué)習(xí)下吧2022-06-06
vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue使用Less與Scss實(shí)現(xiàn)主題切換方法詳細(xì)講解
目前，在眾多的后臺(tái)管理系統(tǒng)中，換膚功能已是一個(gè)很常見(jiàn)的功能。用戶可以根據(jù)自己的喜好，設(shè)置頁(yè)面的主題，從而實(shí)現(xiàn)個(gè)性化定制。目前，我所了解到的換膚方式，也是我目前所掌握的兩種換膚方式，想同大家一起分享2023-02-02
vue如何監(jiān)聽(tīng)瀏覽器主動(dòng)刷新
這篇文章主要介紹了vue如何監(jiān)聽(tīng)瀏覽器主動(dòng)刷新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10