Vue3:重构Pinia的store,使用组合式写法实现

一、情景说明

之前的count.tsloveTalk.ts都是选项式写法

这里,重构成Vue3官方建议的组合式写法(Composition)

二、案例

loveTalk.ts为例

1、选项式(Options)写法

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

2、组合式(Composition)写法

javascript 复制代码
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}
})
相关推荐
daydayupx4 分钟前
【前端学部署】第一篇: 几块钱部署一个有域名的静态网站
前端·后端
Spider_Man5 分钟前
从 "字符拼图" 到 "文字魔术":动态规划玩转字符串变形术
javascript·算法·leetcode
前端搬砖仔噜啦噜啦嘞5 分钟前
从0到1开发一款vscode插件
前端·javascript
汪子熙7 分钟前
计算机编程中的 Predicate 概念详解
前端
xianxin_7 分钟前
HTML 空格符
前端
baozj7 分钟前
🚀我靠!AI 帮我“摸鱼”摸成了腾讯开源组件库 TDesign 的贡献者!
前端·开源·github
Points18 分钟前
开源分享:一个轻量级管理iOS数据自动升级的管理类-SpeSqliteManager4IOS
前端
鹏程十八少20 分钟前
7. Android AI大模型 文本打字机效果 流畅光标追踪与智能滚动
前端
Mintopia22 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
Mintopia23 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js