Vue3从入门到实战：掌握状态管理库pinia（下部分）

1.storeToRefs

在Count.vue文件中

显的冗余了，如何更加优雅简化代码。用storeToRefs

补充：

为什么不用ToRefs呢？

使用的话会将所有数据都用ref引用包裹，其实方法等是没必要包裹的，具有一定风险

2.getters的使用

概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

1.在count.ts文件增添getters

第二种写法：

1.简化写法

2.将up的xiaoli转换成大写

或者

追加getters配置并从组件中读取数据。

count.ts文件代码：

javascript 复制代码

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
   // actions里面放置的是一个一个的方法，用于响应组件中的"动作"
   actions:{
    increment(value:number){
      console.log('increment被调用了',value)
      if( this.sum < 10){
        // 修改数据（this是当前的store）
        this.sum += value,
        this.up ='xiaoli',
        this.message='欢迎来看我的博客，别忘了点赞噢,谢谢'
      }
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      sum:6,
      up:'xxx',
      message:'xxxxxxxx'
    }
  },
  getters:{
    bigSum:state=>state.sum*10,//通过回调来简化写法


    upperUp():String{//这里的state可以用this表示
      return this.up.toUpperCase()//有this不能用回调！！！
    }
  }

})

Conunt.vue文件代码：

javascript 复制代码

<template>
  <div class="count">
    <h2>当前求和为:{{ sum }},扩大十倍后: {{bigSum}}</h2>
    <h3>博主:{{up}},转换大写后:{{ upperUp }}</h3>
    <h4>他想说的话:{{ message }}</h4>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref,reactive } from "vue";
  import {useCountStore} from '@/store/count'
  import { storeToRefs } from "pinia";
  import{toRefs} from 'vue'

  const countStore = useCountStore()
 const{sum,up,message,bigSum,upperUp} = toRefs(countStore)

  // 数据
  let n = ref(1) // 用户选择的数字
  // 方法

  
  function add(){
    //第一种修改方式
    //  countStore.sum = 8888888,
    //  countStore.up='小李同学',
    //  countStore.message='欢迎来看我的博客，别忘了点赞噢,谢谢'

    //第二种修改方式
    // countStore.$patch({
    //   sum:666,
    //   up:'小李同学',
    //   message:'欢迎来看我的博客，别忘了点赞噢,谢谢'
    // })


     // 第三种修改方式
     countStore.increment(n.value)

  }


  function minus(){
    countStore.sum -= n.value
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>

通过 store 的 $subscribe() 方法侦听 state 及其变化 ，还可以实现刷新后仍保留数据

loveTalk.ts文件代码：

javascript 复制代码

import {defineStore} from 'pinia' // 引入 pinia 的 defineStore 方法，用于定义状态管理仓库  
import axios from 'axios' // 引入 axios 库，用于发送 HTTP 请求  
import {nanoid} from 'nanoid' // 引入 nanoid 库，用于生成唯一的 ID  
  
// 导出名为 useTalkStore 的状态管理仓库  
export const useTalkStore = defineStore('talk',{  
  // 定义 actions，用于包含异步操作或批量修改状态的操作  
  actions:{  
    // 定义一个异步方法 getATalk，用于获取一条随机的土味情话语录  
    async getATalk(){  
      // 发送 GET 请求到指定的 URL，并等待响应结果  
      // 使用连续解构赋值和重命名的方式获取响应数据中的 content 字段，并将其重命名为 title  
      let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')  
        
      // 创建一个新的对象 obj，包含使用 nanoid 生成的唯一 ID 和上面获取的 title  
      let obj = {id:nanoid(),title}  
        
      // 将新创建的对象 obj 插入到 talkList 数组的开头  
      this.talkList.unshift(obj)  
    }  
  },  
  // 定义 state，用于返回组件或应用的初始状态  
  state(){  
    // 尝试从 localStorage 中获取 'talkList' 键对应的值，并解析为 JavaScript 对象或数组  
    // 如果解析失败或获取不到值，则返回一个空数组作为 talkList 的默认值  
    return {  
      talkList:JSON.parse(localStorage.getItem('talkList') as string) || []  
    }  
  }  
})

LoveTalk.vue文件代码：

javascript 复制代码

<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
  import {useTalkStore} from '@/store/loveTalk'
  import { storeToRefs } from "pinia";

  const talkStore = useTalkStore()
  const {talkList} = storeToRefs(talkStore)

  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>

展示：

4.store的组合式写法

这种组合式写法的优势在于它提供了更好的代码组织和复用性。通过将逻辑封装在单独的函数中，使用 setup 函数和组合式 API 的其他函数（如 reactive），可以更灵活地控制组件的状态和行为。

之前我们这样写就是选项式的写法

换成组合式写法：

loveTalk代码：

javascript 复制代码

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'

//选项式写法
/* export const useTalkStore = defineStore('talk',{
  actions:{
    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 {
      talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
    }
  }
})
 */


//组合式写法
import {reactive} from 'vue'
export const useTalkStore = defineStore('talk',()=>{
  // talkList就是state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )

  // getATalk函数相当于action
  async function getATalk(){
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(),title}
    // 放到数组中
    talkList.unshift(obj)
  }
  return {talkList,getATalk}
})

Vue3从入门到实战：掌握状态管理库pinia（下部分）

1.storeToRefs

2.getters的使用

3.$subscribe

4.store的组合式写法