【Vue3】getters---Vue3中的计算属性工具

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!

文章目录

在Vue3中,getters是一个非常有用的工具,它可以帮助我们在Vuex中处理和计算状态。本文将介绍getters的概念、作用目的、优劣、使用方法以及结语。

🍋概念

getters是Vuex中的一种计算属性。它可以对Vuex中的状态进行一些计算或者过滤,然后在组件中使用。getters可以看作是store的计算属性

🍋作用

getters的主要作用是对Vuex中的状态进行一些复杂的计算或者过滤。它可以帮助我们在组件中使用简单的方式来获取状态,并且可以将一些逻辑放到getters中,使得代码更加清晰和易于维护

🍋优劣

优点:

复制代码
提供了一种简单的方式来对状态进行计算或者过滤。
可以将一些复杂的逻辑放到getters中,使得代码更加清晰和易于维护。

缺点:

复制代码
在处理一些简单的状态获取时,可能会显得有些繁琐。

🍋使用方法

打开我们之前的Count.ts

在state后面加上getters,这里我们想让数值乘5

html 复制代码
getters:{
    bigSum:state => state.sum * 5
  }

之后,我们将bigSum也结构一下,同时在模板里面写一个,显示一下

完整代码如下

html 复制代码
<template>
<div class="count">
    <h2>当前求和为:{{ sum }}</h2>
    <h2>当前求和的五倍为:{{ bigSum }}</h2>
    <h3>欢迎来到:{{ school }},坐落于:{{ address }}</h3>
<select v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <button @click="_add">加</button>
    <button @click="_jian">减</button>
</div>
</template>
<script setup lang='ts' name="Count">
    import {ref} from 'vue'
    import {storeToRefs} from 'pinia'
    import {useCountStore} from '@/store/Count'
    const countStore = useCountStore()
    const {sum,school,address,bigSum} = storeToRefs(countStore)
    let n = ref(1)

    function _add(){
      countStore.increment(n.value)
    }
    function _jian(){
      countStore.sum -= n.value
    }


</script>
<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>

运行结果如下

🍋结语

getters是Vuex中非常实用的工具,它可以帮助我们在Vuex中处理和计算状态。通过使用getters,我们可以将一些复杂的逻辑放到getters中,使得代码更加清晰和易于维护

从上面的结果来看,这个getters在处理数值上作用还是蛮大的,最重要的莫过于维护简单,毕竟都在{}包裹里了

挑战与创造都是很痛苦的,但是很充实。

相关推荐
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex52 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人2 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine2 小时前
JS Entry和 HTML Entry
前端
用户63310776123662 小时前
Who is a Promise?
前端
用户785127814703 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫3 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
比老马还六3 小时前
Blockly元组积木开发
前端
笨笨狗吞噬者3 小时前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
bot5556663 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试