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

Pinia-学习之路 08，pinia的多个API - $subscribe

引言

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

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

pinia的多个API - $subscribe

在之前，我们学习了 pinia 中的两个重要的 API 方法为

• $patch 可以批量修改 state 里面的数据

• $reset 可以重置 state 里面的数据

接下来我们学习一下，下图中 $subscribe 这个 API 的方法

$subscribe

它这个 API 的方法，根据名字它是 订阅 的意思，可知它的主要是用于监听 state 里面的值是否发生了变化。

它返回一个函数，这个函数里面有两个参数

• 第一个参数 args，这个 args 里面的东西，就是 vue3 中的 watchEffect 里面的东西

• 第二个参数 state，这个就是我们当前的 state

我们在 useList.vue 文件中，打印下 $subscribe 这个 API

// 监听数据的变化
store.$subscribe((args, state) => {
  console.log('args', args)
  console.log('state', state)
})

在点击 push 按钮的时候，我们去看下打印台发生了什么。

• 可以注意到 args 中参数

  • 其中的 storeId 就是我们 defineStore 定义的 key 值，也就是 id 值。

  • type 则是记录这次变化，是通过什么途径，有三个参数。关于有什么途径可以改变 state 的值，可以参考这篇 Pinia-学习之路 04，改变数据状态的方式 文章，有详细讲述。

    • direct：通过 action 变化

    • patch object：是通过我们熟悉的 $patch 的 对象方式 来变化

    • patch function：也是通过 $patch，但是是通过 函数的方式 来变化

  • 最后就是我们的 events，我们这里把它展开

    

    • 有改变前和改变后的值

    • target 目标值

• state 值

  可以看到我们的 state 值，是我们的当前改变的 store 后的值，这点是很重要的。

总结

在我们的 store 中的 state 发生了改变，那么就会执行 $subscribe

这里面有我们想要的 当前的 store 对象，也有我们的 state 值

既然 key 和 value 都有了，那么就可以做最重要的，可以将我们的 store 进行持久化处理，保存到本地。解决了 VueX 的痛点。

总结

学习了 Pinia 中的多个API - $subscribe 的作用

• 主要是用于监听 state 中的数据是否发生变化，然后可以在其内部处理一些操作。

• 这个 API 的另一个重要作用，就是可以极大的方便了我们将整个 store 进行 持久化处理