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}
})
相关推荐
Deepsleep.6 分钟前
react和vue的区别之一
javascript·vue.js·react.js
WEI_Gaot7 分钟前
react19 的项目创建和组件使用
前端·react.js
资深前端外卖员10 分钟前
【nodejs高可用】前端APM应用监控方案 + 落地
前端·后端
OhBonsai10 分钟前
Shader 图像处理1_ToneMap技术处理过曝
前端
突头小恐龙11 分钟前
Chrome devTools - Lighthouse
前端·javascript·chrome
谦谦橘子11 分钟前
手写tiny webpack,理解webpack原理
前端·javascript·webpack
土豆125013 分钟前
Tailwind CSS 精通指南:提升效率、可维护性与最佳实践
前端·css
花生了什么树lll13 分钟前
面试中被问到过的前端八股(四)
前端·面试
zqlcoding13 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
海底火旺13 分钟前
破解二维矩阵搜索难题:从暴力到最优的算法之旅
javascript·算法·面试