一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

pinia-学习之路 05，getters

引言

本系列会以我的一个理解，来介绍并开始学习 Pinia。

中间会插入自己所联系到的乱七八糟的 知识点。

getters

pinia 中的 state 和 actions 的使用在上面已经讲解，下面学习下 getters 的使用。

使用

这里我们 getters 中，创建一个方法，用来获取下 myList 的长度。这里需要注意，尽量不要使用箭头函数，因为里面有 this

  getters: {
    getMyListLength(): number {
      return this.myList.length
    }
  },

我们在目录中的 view 下创建文件，并在 App.vue 中进行引入

- view/
--- studyGetters.vue
- App.vue

<StudyGetters></StudyGetters>

import StudyGetters from './view/studyGetters.vue'

我们在页面中直接进行使用, 可以看到值是直接出来的。

<template>
  <div>
    <h2>studyGetters</h2>
    <span>{{ store.getMyListLength }}</span>
    <br />
  </div>
</template>

<script setup lang="ts">
import { mainStore } from '../store/index'

const store = mainStore()
</script>

之后这里我们尝试修改一下 myList 的值，查看下我们的 getters 是否也跟着进行改变。

<div>{{store.myList}}</div>
<button @click="addData">给 Mylist 添加一条数据 </button>

const addData = () => {
  store.myList.push(1)
}

通过上面的gif图可以清楚的看到，数据它是动态响应的。

缓存

getters 中的数据是具有缓存效应的，多个地方使用，只会调用一次。

先将 getters 中的 getMyListLength 方法，添加一段调试信息

  getters: {
    getMyListLength(): number {
      console.log('调用我！！！')
      return this.myList.length
    }
  },

之后创建一个新的文件 studyGetters2.vue，流程与上面一样，简单修改一下内容即可，页面效果如下。

- view/
--- studyGetters.vue
--- studyGetters2.vue
- App.vue

<template>
  <div>
    <hr />
    <h2>studyGetters2</h2>
    <span>{{ store.getMyListLength }}</span>
    <br />
    <div>{{store.myList}}</div>
    <button @click="addData">给 Mylist 添加一条数据 </button>
    <hr>
  </div>
</template>

20220422_191619 (3).gif

我们在进行点击后，可以看到，虽然是两个页面都在调用，但是仅仅只会调用一次，说明 getters 中的数据是具有缓存效应的，是对这一块做了优化。

总结

学习了 Pinia 中的 getters 的使用，注意 getters 是具有缓存效果的。

Pinia-学习之路 05，getters

pinia-学习之路 05，getters

引言

getters

使用

缓存

总结