Vue3状态管理工具pinia

1. 搭建pinia环境

• 第一步，创建

  npm install pinia
• 在 main.ts 中引入

  import {createPinia} from 'pinia'
  const pinia=createPinia()
  app.use(pinia)

2. 存储+读取数据

• 在 src 中新建一个 store 文件夹，里面新建相关的store

  import {defineStore} from 'pinia'
  export const useCountStore = defineStore('count',{
    state(){
      return {
        sum:6,
        school:'firstSchool',
        address:'GaoxinStreet'
      }
    },
    actions:{ // 放置方法，用于相应组件中的动作
      increment(value:number){
        if(this.sum<10){
          this.sum += value // this表示useCountStore
        }
      },
    },
    getters:{  // 类似与计算属性,可以用state也可以用this
      bigSum(state){
        return state.sum*10
      },
      // 也可以写为：
      // bigSum:state=>state.sum*10  // 注意箭头函数不可以用this
      upperSchool():string{
        return this.school.toUpperCase
      }
    }
  })
• 在组件中使用

  import { storeToRefs } from "pinia"
  import {useCountStore} from '@/store/count.ts'
  const countStore = useCountStore()
  console.log(countStore.sum) //6
  console.log(countStore.$state.sum) //6
  // 如需解构赋值，使用storeToRefs只关注pinia里的数据
  const {sum,school,address,bigSum,upperSchool} = storeToRefs(countStore)

3. 修改数据

1. 直接修改

function add(){
  countStore.sum+=1
}

2. 批量修改

function add(){
  countStore.$patch({
    sum:sum+1,
    school:'第一中学',
    address:'高新大道'
  })
}

3. action 修改

let n = ref(3)
function add(){
  countStore.increment(n.value)
}

4. $subscribe 订阅

countStore.$subscribe((mutate,state)=>{
  console.log(mutate,state) 
})

5. pinia 的组合式写法

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid' // 随机生成不唯一ID的插件
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}
})