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

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