【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在处理数值上作用还是蛮大的,最重要的莫过于维护简单,毕竟都在{}包裹里了

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

相关推荐
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL2 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js