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

pinia-学习之路 07，pinia的多个API - $reset

引言

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

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

pinia的多个API - $reset

在之前，我们学习了 pinia 中的一个 API 方法为 $patch

它主要是在我们批量的修改我们的数据时，会提高效率

当然 store 中还有很多的 API，我们这里打印一下，通过下图可以看到还有 $reset

和 $subscribe 等等，这些 API 方法

$reset

它这个 API 的方法，主要是将我们的数据进行重置操作。

什么是重置呢，就是将我们在 state 里面定义的数据，全部初始化。

这里学习下，首先在 store/list.ts 文件下，getters 和 actions 各分别新增一个方法。一个进行获取 list 数据，另一个设置 list 数据。

在 view 下创建 useList.vue 文件，内容如下

<template>
  <div>
    <h2>myList</h2>
    <span>myList2:{{ getList }}</span>
    <br />
    <button @click="pushData">点我push数据</button>
  </div>
</template>

<script setup lang="ts">
import { listStore } from '../store/list'
import { storeToRefs } from 'pinia'

const store2 = listStore()

const { list, setList, getList } = store2

const pushData = () => {
  const val = { id: getList.length + 1 }
  setList(val)
}
</script>

对应页面的内容如下

此时你点击 push 数据，发现完美的能够 push 数据。但是这里有个坑点的。

等你点击重置的时候，你就会发现，你无法重置。

原因就是，你解构的时候，没有将数据进行响应式处理。正确的解构方式如下图

这里一定注意：解构数据时，一定要进行响应式数据 storeToRefs 进行处理，这样才能进行重置操作。

总结

学习了 Pinia 中的多个API - $reset 的作用，主要是用于将 state 中的数据重置。