An article analyzing the basic use of VUEX getters computed properties

We may need to change some attributes before using them. At this time, we can use getters:

Case examples: At present, we hope that the data in the following cases can To achieve the effect of total quantity and total price [Related recommendation: vue.js video tutorial]

Considering that other pages may also use this Logical calculation, all can be managed using the getters attribute

   getters:{
    //里面会传过来一些参数state
    totalPrice(state){
         let  totalPrice=0 //默认0
         for(const book of state.books){ //对这个数组做一个遍历
            totalPrice+=books.count * books.price
         }
         return totalPrice
    }
   },

If you use the page to call this function directly

  e388a4556c0f65e1904146cc1a846bee总价值:{{$store.getters.totalPrice}}94b3e26ee717c64999d7867364b1b4a3

About getters Other explanations

(1) About the second parameter of getters, its function is to call other functions in getters

Strive to make a Simplify the normal way of

vue2 getters and use one of

<template>
    <div>
    <p>总价值:{{totalPrice}}</p>
    </div>
</template>
<script>
import {useStore} from &#39;vuex&#39;
    export default {
     computed:{
         totalPrice(){
             this.$store.getters.totalPrice
       }
     } 
    }
</script>

vue2 getters in the optionsAPI. Enhance the way

If our interface If too much data is needed to be displayed, a lot of logical functions need to be written in computed, and the amount of our code will become very large. At this time we can use the auxiliary function mapGetters to help us implement these logics.

(1)Introduce our auxiliary function: import {mapGetters} from 'vuex';

(2)Use the auxiliary function in computed

html:
<template>
    <div>
    <p>总价值:{{totalPrice}}</p>
      <p>哈哈哈:{{infoname}}</p>
    </div>
</template>
js:
<script>
// 引入辅助函数
import {mapGetters} from &#39;vuex&#39;
    export default { 
     computed:{
        //  使用辅助函数
         ...mapGetters(["totalPrice","infoname"])
     }
    }
</script>

vue3: getters are displayed in the compositionAPI using the

ordinary traditional way:

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

Complex logic layers can use auxiliary functions mapGetters To achieve, you can also encapsulate it into a hook, create a new mapgeters library and write the following code in it

//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
}

How to use the page:

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

Because we encountered the same code before when encapsulating the corresponding hooks, that is to say, we can now continue to extract the same code and make a secondary encapsulation, and create a new useMapper in the hooks. js, write

//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
}

and introduce the public method in the corresponding file

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

}

The above is the detailed content of An article analyzing the basic use of VUEX getters computed properties. For more information, please follow other related articles on the PHP Chinese website!