Vue 状态管理仓库 Pinia

存储+读取数据

1. Store是一个保存、业务逻辑的实体，每个组件都可以读取、写入它。
2. 它有三个概念：state、getter、action，相当于组件中的：data、computed和methods。
3. 具体编码：src/store/count.ts

import {difineStore} from 'pinia'

//定义并暴露一个store
export const useCountStore = difineStore('count',{
    //动作
    actions:{
    
    },
    
    //状态
    state(){
        return {
            sum:6
        }
    },
    // 计算
    getters:{}
    
})

修改数据（三种方式）

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

countStore.sum = 666

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

countStore.$patch({
    sum:999,
    school:'101'
})

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

import {defineStore} from 'pinia'

export const useCountStore = defineStore('count',{
    actions:{
        // 加
        increment(value:number){
            if (this.sum < 10){
                // 操作countStore中的sum
                this.sum += value
            }
        }
    }
})

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)
</script>

getters

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

import {defineStore} from 'pinia'

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

$subscribe

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

talkStore.$subscribe((mutate,state) =>{
    console.log('LoveTalk',mutate,state)
    localStorage.setItem('talk',JSON.stringify(talkList.value ))
})