快速理解Vue3中Pinia里的subscribe方法使用

快速理解Vue3中Pinia里的subscribe方法使用

一、Pinia简介

Pinia是Vue3的状态管理库，类似Vue2中的Vuex，但使用更简洁高效

二、subscribe方法简介

subscribe方法是Pinia中的监听器函数，有点像watch，但监听的是store中的状态（数据/state）变化，在store中的状态变化时会执行自定义逻辑。

可用于调试和定位问题、记录日志后续分析、触发操作（比如保存到本地存储等）

三、subscribe使用

//vue文件中，引入store
import { useTalkStore } from '@/store/talk'; 
const talkStore=useTalkStore()
//调用.$subscribe
talkStore.$subscribe((mutate,state)=>{
    console.log('talkStore中保存的数据发生了变化',mutate,state);
    localStorage.setItem('talkList',JSON.stringify(state.talkList))
   })

可以看到，.$subscribe方法有两个参数，第一个是有关状态变更的信息，比如类型、路径等；主要关注第二个参数，是当前的状态（数据）对象，可以在subscribe自定义逻辑中对其进行操作，比如上面的例子，将state中的数据存到本地。