【Pinia】快速入门及数据持久化

快速入门

1. Store是一个保存：状态、业务逻辑 的实体，可近似看成一个保存数据的仓库，每个组件都可以对他进行读写。
2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

pinia 的特点：

• 完整的s的支持：
• 足够轻量，压缩后的体积只有1kb左右：
• 去除mutations,只有state,getters,actions;
• actions支持同步和异步；
• 代码扁平化没有模块嵌套，只有store的概念，sore之间可以自由使用，每一个store都是独立的
• 无需手动添加store,store一旦创建便会自动添加；
• 支持Vue3和Vue2

上述摘自：学习Pinia

读取数据

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作 相当于 同步 / 异步的 methods 提交 state
  actions:{},
  // 状态 需要接收一个箭头函数
  state: () => { 
  	return { 
  	  count: 0
  	} 
  },
  // 计算 相当于 computed 修饰一些值
  getters:{}
})

<template>
  <h2>当前求和为：{{ sumStore.sum }}</h2>
</template>

<script setup lang="ts" name="Count">
  // 引入对应的useXxxxxStore	
  import {useSumStore} from '@/store/sum'
  
  // 调用useXxxxxStore得到对应的store
  const sumStore = useSumStore()
</script>

修改数据

1. 第一种修改方式，直接修改

   countStore.sum = 666
   

2. 第二种修改方式： $patch 批量修改

   countStore.$patch({
     sum:999，
   })
   // 函数式写法：
   countStore.$patch((state) => {
     state.sum = 999
   })
   

3. 第三种修改方式： $store 直接覆盖

   // 直接覆盖
   countStore.$state = {
     // 这里必须全部传入  因为 是直接覆盖
     sum:999，
   }
   

4. 第四种修改方式：借助action修改（action中可以编写一些业务逻辑）

   import { defineStore } from 'pinia'
   
   export const useCountStore = defineStore('count', {
     actions: {
       //加
       increment(value:number) {
         if (this.sum < 10) {
           //操作countStore中的sum
           this.sum += value
         }
       },
       //减
       decrement(value:number){
         if(this.sum > 1){
           this.sum -= value
         }
       }
     },
   })
   

   组件中调用action即可

    // 使用countStore
    const countStore = useCountStore()
    // 调用对应action
    countStore.incrementOdd(n.value)
   

storeToRefs

pinia 的解构不具有 响应式。因此为了解决这个问题，我们需要使用 storeToRefs。

pinia提供的storeToRefs只会将数据（state，getters，插件添加的状态）做转换响应式（proxy代理），不会对方法进行响应式。而Vue的toRefs会转换store中的所有数据。

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

getters

当state中的数据，需要经过处理后再使用时，可以使用getters配置。

getters:{
    bigSum:(state):number => state.sum *10, // 当然也可以写成普通函数
}

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

actions

actions:{
	// 同步
	//setUser(){
	//    this.user = result;
	//}
	// 异步
	await setUser() {
	 	const res = await Login()
	}
	// 也可以和其他方法相互调用 
},

$subscribe

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

talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  // 可以实现数据持久化
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})

state(){
  return {
    talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
  }
}

store 的组合式写法

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

数据持久化

import {defineStore} from "pinia";
import {ref} from "vue";

export const useUserInfoStore = defineStore('userInfo',()=> {
    const info = ref({})
    const setInfo = (newInfo) => {
        info.value = newInfo
    }
    const clearInfo = () => {
        info.value = {}
    }
    return {
        info,setInfo,clearInfo
    }
}, {
    persist: true
})

其中 persist 为持久化插件，刷新页面 store 数据不丢失。

npm install pinia-persistedstate-plugin

在main.js中，

import { createPinia } from 'pinia'
//导入持久化插件
import {createPersistedState} from'pinia-persistedstate-plugin'
const pinia = createPinia()
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)
app.use(pinia)