Vue3中Pinia存储和修改数据应用实践

安装pinia:

npm install pinia

main.ts中使用pinia:

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 引入路由器
import router from './router'

// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)

// 第一步：引入pinia
import {createPinia} from 'pinia'
// 第二步：创建pinia
const pinia = createPinia()
// 第三步：安装pinia
app.use(pinia)

app.mount('#app')

【1】存储和读取数据

store/count.ts文件如下所示：

import {defineStore} from 'pinia'
//count为id名，通常和文件名称、组件名称有关
export const useCountStore = defineStore('count',{
  // 真正存储数据的地方
  state(){
    return {
      sum:6
    }
  }
})

components/Count.vue组件中使用sum：

import {useCountStore} from '@/store/count'
const countStore = useCountStore()
// 以下两种方式都可以拿到state中的数据
console.log('@@@',countStore.sum)
console.log('@@@',countStore.$state.sum)

【2】修改数据

① 直接修改

// 引入useCountStore
  import {useCountStore} from '@/store/count'
  // 使用useCountStore，得到一个专门保存count相关的store
  const countStore = useCountStore()
  // 方法
  function add(){
    // 第一种修改方式
    countStore.sum += 1
  }

这种方式在Vue2中是不可以的。

② $patch

// 引入useCountStore
import {useCountStore} from '@/store/count'
// 使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore()
// 方法
function add(){
  // 第二种修改方式
  countStore.$patch({
    sum:888
  }) 
}

③ actions

store/count.ts修改如下：

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
  // actions里面放置的是一个一个的方法，用于响应组件中的“动作”
  actions:{
    increment(value){
      console.log('increment被调用了',value)
      if( this.sum < 10){
        // 修改数据（this是当前的store）
        this.sum += value
      }
    }
  },
  // 真正存储数据的地方
  state(){
    return {
      sum:6
    }
  }
})

Count.vue修改如下：

// 引入useCountStore
  import {useCountStore} from '@/store/count'
  // 使用useCountStore，得到一个专门保存count相关的store
  const countStore = useCountStore()
  // 方法
  function add(){
    // 第三种修改方式
    countStore.increment(1)
  }

【3】storeToRefs

• 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
• 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据(无论你是否用到，也不管是数据还是方法，都会进行转换)。

<template>
	<div class="count">
		<h2>当前求和为：{{sum}}</h2>
	</div>
</template>

<script setup lang="ts" name="Count">
  import { useCountStore } from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'

	/* 得到countStore */
  const countStore = useCountStore()
  /* 使用storeToRefs转换countStore，随后解构 */
  const {sum} = storeToRefs(countStore)

  //也可以，不推荐
  const {sum} = toRefs(countStore)
</script>

【4】getters

1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
2. store/count.ts追加getters配置。

// 引入defineStore用于创建store
     import {defineStore} from 'pinia'
     
     // 定义并暴露一个store
     export const useCountStore = defineStore('count',{
       // 动作
       actions:{
         /************/
       },
       // 状态
       state(){
         return {
           sum:1,
           school:'qinghua'
         }
       },
       // 计算
       getters:{
         bigSum:(state):number => state.sum *10,
         upperSchool():string{
           return this. school.toUpperCase()
         }
       }
     })

3. 组件中读取数据：

const {increment,decrement} = countStore
     let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

【5】监听store中数据变化

通过 store 的 $subscribe() 方法侦听 state 及其变化

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

【6】组合式写法

选项式写法如下：

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