VUEX getters計算屬性如何使用

本篇內容介紹了“VUEX getters計算屬性如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

考慮到其他頁面也許也會用到這種邏輯計算，所有可以使用getters 屬性將其管理起來

   getters:{
    //里面會傳過來一些參數state
    totalPrice(state){
         let  totalPrice=0 //默認0
         for(const book of state.books){ //對這個數組做一個遍歷
            totalPrice+=books.count * books.price
         }
         return totalPrice
    }
   },

頁面如果使用直接調取這個函數就可以了

  <p>總價值:{{$store.getters.totalPrice}}</p>

關于getters  其他講解

（1）關于getters 第二個參數，作用是調用getters 里面的其他函數

爭對視圖中的數據做一個簡化

vue2 的普通方式getters 在 optionsAPI 中的一個使用

<template>
    <div>
    <p>總價值:{{totalPrice}}</p>
    </div>
</template>
<script>
import {useStore} from 'vuex'
    export default {
     computed:{
         totalPrice(){
             this.$store.getters.totalPrice
       }
     } 
    }
</script>

vue2 getters 增強方式

如果我們界面需要太多的數據展示的話，就需要在computed 里面寫很多的邏輯函數，那樣我們的代碼量也會變得很大。此時我們可以借助輔助函數  mapGetters  來幫我們實現這些邏輯。

(1)引入我們輔助函數：import {mapGetters} from 'vuex'；

（2）在computed 里面使用輔助函數

html:
<template>
    <div>
    <p>總價值:{{totalPrice}}</p>
      <p>哈哈哈:{{infoname}}</p>
    </div>
</template>
js:
<script>
// 引入輔助函數
import {mapGetters} from 'vuex'
    export default { 
     computed:{
        //  使用輔助函數
         ...mapGetters(["totalPrice","infoname"])
     }
    }
</script>

vue3:getters 在 compositionAPI 中的一個使用

普通的傳統的方式進行展示：

<template>
    <div>
    <p>{{totalPrice}}</p>
    </div>
</template>
<script>
import {useStore} from 'vuex'
import {computed} from 'vue'
    export default { 
        setup(){
            const useStore=useStore()
            const totalPrice=computed(()=>store.getters.totalPrice)
            return{
             totalPrice
            }
        }
    }
</script>

復雜邏輯層可以使用 輔助函數 mapGetters  來實現，同時也可以封裝成一個hooks，新建一個mapgeters 庫 并且在里面寫入以下代碼

//hook 就是函數而已  這里封裝一些公共的方法
import { computed } from 'vue'
import {mapGetters,useStore} from 'vuex'
export function useGetters(mapper){
// 拿到這個useStore對象
 const store=useStore()
//獲取到對應的對象的functions:{name:function,age:function,height:function}
 const storeStateFns=mapGetters(mapper) //這里需要到時候用戶傳入的數組
//對數據進行轉換
const storegetters={}//現在全部轉成{name:ref,age:ref,height:ref放在這個里面了}
// 遍歷拿到我們的key
Object.keys(storeStateFns).forEach(fnKey=>{
    //取出具體的函數
    const fn=storeStateFns[fnKey].bind({$store:store}); //這里的store 就是我們拿到的useStore
    //用computed 函數做一個包裹;
     storegetters[fnKey]=computed(fn)
})
return storegetters
}

頁面使用方法：

<template>
    <div>
    <p>{{totalPrice}}</p>
    </div>
</template>
<script>
import {useGetters} from '../hooks/hook'
import{useStore} from 'vuex'
    export default { 
        setup(){
            const useGetters=useGetters(["totalPrice","nameIfo"])
            return{
           ...useGetters
            }
        }
    }
</script>

因為前面我們在封裝相對應的hooks 時遇到了相同的代碼，也就是說我們現在可以把相同的代碼繼續抽出來在做一個二次封裝，在hooks 里面在新建一個useMapper.js 在里面寫入

//hook 就是函數而已  這里封裝一些公共的方法
import { computed } from 'vue'
import {useStore} from 'vuex'
export function useMapper(mapper,mapFn){ //mapFn 就是以后要使用放入輔助函數傳進來
// 拿到這個useStore對象
 const store=useStore()
//獲取到對應的對象的functions:{name:function,age:function,height:function}
 const storeStateFns=mapFn(mapper) //注意由于我們這里是二次封裝，所以映射關系不能寫死，
//對數據進行轉換
const storeState={}//現在全部轉成{name:ref,age:ref,height:ref放在這個里面了}
// 遍歷拿到我們的key
Object.keys(storeStateFns).forEach(fnKey=>{
    //取出具體的函數
    const fn=storeStateFns[fnKey].bind({$store:store}); //這里的store 就是我們拿到的useStore
    //用computed 函數做一個包裹;
      storeState[fnKey]=computed(fn)
})
return storeState
}

在在對應的文件引入該公共方法

// 例如：我們現在是在mapGrtters.js 文件中
import {mapGetters} from 'vuex'
import { useMapper } from './useMapper'
export function useGetters(mapper){
    return useMapper(mapper,mapGetters)

}

“VUEX getters計算屬性如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！