Vue3：重构Pinia的store，使用组合式写法实现

最新推荐文章于 2024-08-07 23:19:20 发布

生产队队长

最新推荐文章于 2024-08-07 23:19:20 发布

阅读量514

点赞数 3

分类专栏：前端文章标签：重构 javascript 前端

本文链接：https://blog.csdn.net/Brave_heart4pzj/article/details/137273994

版权

前端专栏收录该内容

96 篇文章 2 订阅

订阅专栏

本文比较了Vue3中使用Pinia进行状态管理的选项式和组合式写法，通过实例展示了如何将axios请求集成到状态管理和动作中，以及如何重构存储和处理数据的过程。

摘要由CSDN通过智能技术生成

一、情景说明

之前的count.ts和loveTalk.ts都是选项式写法
这里，重构成Vue3官方建议的组合式写法(Composition)

二、案例

以loveTalk.ts为例
1、选项式(Options)写法

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

2、组合式(Composition)写法

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
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}
})