笔记

订阅可以让我们监视Vuex中数据的修改。

源码

store\loveTalk.ts

import {defineStore} from 'pinia'

import axios from "axios";
import {nanoid} from 'nanoid'

export const useTalkStore = defineStore('talk',{

  //
  actions:{
    //用了 await, 补上 async 英 [ə'zɪŋk]美 [ə'zɪŋk]
    async getATalk() {
      let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
      // 把请求回来的字符串，包装成一个对象
      let obj = {id:nanoid(), title} 
      // 放到数组中
      this.talkList.unshift(obj)
    }

  },

  // 真正存储数据的地方
  state(){
    return {
      //... as string 直接断言为 字符串
      //talkList: JSON.parse(localStorage.getItem('talkList') as string) //把字符串转为对象
      //如果有就用,没有则默认为空数组[]
      talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
    }
  }
})

components\LoveTalk.vue

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>

    <ul>
      <!--li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li-->

      <!--
      <li v-for="talk in talkStore.$state.talkList" :key="talk.id">{{talk.title}}</li>
       或者写为 -->
      <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>

    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
  import { storeToRefs } from "pinia";

  import {useTalkStore} from '@/store/loveTalk'
  const talkStore = useTalkStore()
  //拿出其中的 talkList
  const {talkList} = storeToRefs(talkStore)
  //只要是 store, 身上就有 $subscribe() 订阅
  //  mutate: 本次修改的数据
  talkStore.$subscribe((mutate,state)=>{
    console.log('talkStore里面保存的数据发生了变化',mutate,state)

    localStorage.setItem('talkList', JSON.stringify(state.talkList))
  })


  // 方法
  function getLoveTalk(){
    talkStore.getATalk()
  }
</script>

<style scoped>
  .talk {
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>