第二十九：5.7.【$subscribe】侦听数据

5.7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化

mutate　＝>本次修改的信息

state　　＝> 真正的数据

talkStore　的触发后　subscribe　侦听到的数据：

talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})

LoveTalk.vue 页面执行：

const talkStore = useTalkStore()

const {talkList} = storeToRefs(talkStore)

talkStore.$subscribe((mutate,state)=>{

console.log('talkStore里面保存的数据发生了变化',mutate,state)

localStorage.setItem('talkList',JSON.stringify(state.talkList))　// 浏览器本地存储

})

LoveTallk.ts 页面执行，初次获取localStorage 里面的值：

// 真正存储数据的地方

state(){

return {

talkList:JSON.parse(localStorage.getItem('talkList') as string) || []　 // 拿不到后　就给个空数组

}

}