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

心已赠人 2024-04-26 01:48 68阅读 0赞

##  ##

## 1.storeToRefs ##

**在Count.vue文件中**

![8b1c3cb523634f7eb89671b18346c2fa.png][]

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

![d3f7902cbbfc4cbb89b40920a6e43370.png][]

![5db3fe0fec0145d4a9dfaadd5fecb65b.png][]

**补充：**

**为什么不用ToRefs呢？**

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

![fa0c1077d1474292ab130a4c3efe9a2d.png][]

--------------------

## 2.getters的使用 ##

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

**1.在count.ts文件增添getters**

![3d483716c31a4f8c9694a2a411d150ad.png][]

![d3b0b13ba0b24ee99dcf1c6fc4ec4155.png][]

**第二种写法：**

**1.简化写法**

**2.将up的xiaoli转换成大写**

![aad400e8160c48b1b600690f57d76167.png][]

或者  
![19ea58f59e3048cc9d7e045246807644.png][]

![a1211f921be344db9368238c573fd86e.png][]

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

![ddf127a0a76546cc88eef931c403626e.png][]

![df62cb85d09c4978a35bfa280fdce42a.png][]

**count.ts文件代码：**

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文件代码：**

<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>

## 3.$subscribe ##

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

**loveTalk.ts文件代码：**

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文件代码：**

<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>

**展示：**

![6b213fd6203d41578b8ce71dd9b541fa.png][]

--------------------

## 4.store的组合式写法 ##

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

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

![c9d9f75b5e174389bf565392e4ca5a4e.png][]

**换成组合式写法 ：**

![be1aa37a96d140508806c6873da412b7.png][]

**loveTalk代码：**

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}
    })

[8b1c3cb523634f7eb89671b18346c2fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1103197248bf4ea89252423f31b620c0.png
[d3f7902cbbfc4cbb89b40920a6e43370.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/590fcd74a3dd48d3a977253086f38916.png
[5db3fe0fec0145d4a9dfaadd5fecb65b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/bf4b9db312a448279bf2e6832d226b77.png
[fa0c1077d1474292ab130a4c3efe9a2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a51f87988b6244689f311c6c7edb396a.png
[3d483716c31a4f8c9694a2a411d150ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3b5aa381e4044a9fb47e99d7e21cba54.png
[d3b0b13ba0b24ee99dcf1c6fc4ec4155.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7ea6c238dcba4eaeab6d669e6290ae24.png
[aad400e8160c48b1b600690f57d76167.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/29eb07392a1e4824829242879fb5c3a5.png
[19ea58f59e3048cc9d7e045246807644.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1e1f81d3ac6348f3b03de5d09c7903ae.png
[a1211f921be344db9368238c573fd86e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7f8910ad09a440f9a1063225d1c456f5.png
[ddf127a0a76546cc88eef931c403626e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5c306d363eac4cb2a09ab030fdb9db1e.png
[df62cb85d09c4978a35bfa280fdce42a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2fd8c4a42ecf46fc8aec2eabd650c2cc.png
[6b213fd6203d41578b8ce71dd9b541fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e85d069742114b63be33b6110154696f.png
[c9d9f75b5e174389bf565392e4ca5a4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a671f1f5fc5f41198bd5d51ee1a990cb.png
[be1aa37a96d140508806c6873da412b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/33bf6cdb78914c5bab7bcd564d15fba2.png