您现在的位置是:群英 > 开发技术 > web开发
Vuex的getters属性什么时候用,用法是怎样的
Admin发表于 2022-11-19 17:51:51513 次浏览
这篇文章给大家分享的是“Vuex的getters属性什么时候用,用法是怎样的”,文中的讲解内容简单清晰,对大家学习和理解有一定的参考价值和帮助,有这方面学习需要的朋友,接下来就跟随小编一起学习一下“Vuex的getters属性什么时候用,用法是怎样的”吧。


某些属性我们可能需要经过变化后来使用,这个时候可以使用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属性什么时候用,用法是怎样的的内容应该都清楚了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多Vuex的getters属性什么时候用,用法是怎样的的知识,欢迎关注群英网络,群英网络将为大家推送更多相关知识的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: getters
相关信息推荐
2022-08-26 17:49:06 
摘要:php实现商品通知的方法:1、创建js代码并设置Ajax每隔10秒钟请求一次接口;2、查询数据库是否有新的订单;3、通过“public function sendOrderNotice(){...}”实现订单提醒即可。
2022-05-26 17:09:43 
摘要:前言我们都知道promise 能很好地解决回调地狱的问题,但是这种方式充满了 promise 的 then() 方法,如果处理流程比较复杂的话,那么整段代码将充斥着 then,语义化不明显,代码不能很
2021-12-20 17:46:39 
摘要:这篇文章给大家分享的是C++实现二叉树遍历的内容,包括二叉树的前序、中序和后序这三种遍历,对大家学习和理解二叉树遍历有一定的帮助,小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部