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