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

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

文章目录

🍋概念
🍋作用
🍋优劣
🍋使用方法
🍋结语

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

🍋概念

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

🍋作用

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

🍋优劣

优点：

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

缺点：

在处理一些简单的状态获取时，可能会显得有些繁琐。

🍋使用方法

打开我们之前的Count.ts
在state后面加上getters，这里我们想让数值乘5

getters:{bigSum:state => state.sum * 5}

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

完整代码如下

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