[Vue] Vuex 是什麼? 怎麼用? — Getters (3/5) | by itsems - Medium

在沒有getters 的時候，我們需要在template 處理抓回來的state ，才能達到這件事情，先在store.js 裡面加上一個mutations 把api 抓回來的值丟進state ... UpgradeOpeninappHomeNotificationsListsStoriesWritePublishedinitsems_frontend[Vue]Vuex是什麼?怎麼用?—Getters(3/5)全系列共五篇：一、[Vue]Vuex是什麼?怎麼用?—State、Mutations(1/5)二、[Vue]Vuex是什麼?怎麼用?—Actions(2/5)三、[Vue]Vuex是什麼?怎麼用?—Getters(3/5)四、[Vue]Vuex是什麼?怎麼用?—Modules(4/5)五、[Vue]Vuex是什麼?怎麼用?—統整、專案結構(5/5)一句話完結：Getters就是store裡面的computed好啦不可以QQOutline:1.Getters情境範例2.Getters可帶參數Getters情境範例Getters簡單說就是可以把state處理過後再丟出去的人，接續上中篇的範例假設情境：我想要在頁面上show出5個random的人，還要計算出有幾個是女生在沒有getters的時候，我們需要在template處理抓回來的state，才能達到這件事情，先在store.js裡面加上一個mutations把api抓回來的值丟進state裡面：接著在template上面加上一個顯示女性人數的人數：

Femalenumber:{{FemaleNum}}

然後在computed裡面我要加上一個計算出人數的算式：computed:{...mapState(["Loaded","clickedTimes","users"]),FemaleNum(){returnthis.users.filter(item=>item.gender=="female").length;}},就可以在這邊算出每次random出的五個人有幾個是女性，但是如果我有很多個地方都需要這個計算，可以乾脆在store裡面寫好，在component直接取出來用就好了回來剛剛的store.js，加上我們的getters：getters:{FemaleNum(state){returnstate.users.filter(item=>item.gender=='female').length;}},其實就是把剛剛的computed拿來用，只是要注意在這邊不是this，是stategetters寫好之後就可以去App.vue把剛剛的computed替換掉：computed:{...mapState(["Loaded","clickedTimes","users"]),...mapGetters(["FemaleNum"])},getters一樣有mapGetters可以使用，這樣子就可以了Getters可帶參數getters除了帶入state之外，總共可以帶入三種參數：state其他getters函式剛剛計算女生人數的getters就只有帶入state，如果要帶入其他getters的話，就來新增一個情境：除了知道抓到的女性人數，還想要知道男性的人數先在store新增一個計算男性人數的getters，我們可以用整個users的陣列長度減掉女性人數就好了：MaleNum(state,getters){returnstate.users.length-getters.FemaleNum}這裡帶入的第二個參數就是getters，可以直接引用上面寫好的getters回到template上，來驗證一下寫得對不對，在剛剛的女性人數下面加上一個男性人數，兩個相加等於5就對了：

Femalenumber:{{FemaleNum}}

Malenumner:{{MaleNum}}

computed裡面的mapGetters也加上剛剛寫好的MaleNum:...mapGetters(["FemaleNum","MaleNum"])就可以看到結果應該是沒有問題的了：想要回傳一個函式的話，可以來試著再新增一個情境：我想要知道抓到的五個人裡面，女生或是男生是不是有超過兩個人在store.js中，加上一個回傳函式的getters：returnFn(state){returnfunctionDetectGender(gd){if(state.users.filter(item=>item.gender==gd).length>2)console.log('Thereareover2'+gd+'indata')elseconsole.log('Noover2'+gd+'indata');}}因為只有一個參數，也沒有this，一樣可以簡化為箭頭函式(ES6)：returnFn:state=>gd=>{if(state.users.filter(item=>item.gender==gd).length>2)console.log('Thereareover2'+gd+'indata')elseconsole.log('Noover2'+gd+'indata');}getters的參數一定要帶state，裡面就可以寫入要回傳的函式了，這邊的參數會帶入要偵測的性別是什麼，超過兩個人的話console會回覆接著來app.vue加上這個新寫的getters，先在template裡面新增兩個按鈕，來偵測女生或是男生：//資料中有沒有超過兩個女生？Aretheremorethan2womenindata?Detect
//資料中有沒有超過兩個男生？Aretheremorethan2menindata?Detect然後在computed的mapGetters加上剛剛的getteersreturnFn，並在methods裡面寫上template上面綁click的DetectGender，把參數帶進去getters：methods:{DetectGender(gd){this.returnFn(gd);},}就完成啦：DemoCodeinGithub內容若有任何錯誤，歡迎留言交流指教！🐬全系列共五篇：一、[Vue]Vuex是什麼?怎麼用?—State、Mutations(1/5)二、[Vue]Vuex是什麼?怎麼用?—Actions(2/5)三、[Vue]Vuex是什麼?怎麼用?—Getters(3/5)四、[Vue]Vuex是什麼?怎麼用?—Modules(4/5)五、[Vue]Vuex是什麼?怎麼用?—統整、專案結構(5/5)ref:精通VueJS前端開發完全指南Vue出一個電商網站Morefromitsems_frontendStayClosetoAnythingthatMakesYouGladYouareAlive.Readmorefromitsems_frontendGetstarteditsems447FollowersStayClosetoAnythingthatMakesYouGladYouareAlive.FollowRelatedINTOTHERPAWORLDRoboticprocessautomation(RPA),alsoknownassoftwarerobotics,usesautomationtechnologiestomimicback-officetasksofhumanworkers…MindsetMattersMostpeopleprobablyhaveneveropenedupthetrunkoftheircarandpulledupthecarpetedfloortodiscoverthecarjackandsparetire…TakingFlightYesterdaymorning,Isuccessfullygraduatedfromthe3-monthlongcareer-prepfellowshipIhadbeenenrolledin.Thelastevervirtualmeet…CreateYourOwnLuck!InhonorofSt.Patrick’sDay,Iwantedtotalkaboutluck.HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable