Pinia

搭建pinia环境

1.引入依赖

npm i pinia

2.在main.ts中引入pinia

 准备一个基本的效果

<template>
    <h2>测试一下pinia</h2>
    <br>
    <span>当前求和为：{{ sum }}</span>
    <br>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
</template>


<script lang="ts" setup>
    import { ref } from 'vue';
    let sum=ref(0)
    let n=ref(1)

    function add(){
        sum.value+=n.value
    }

    function minus(){
        sum.value-=n.value
    }

</script>

1.存储，读取数据

在src文件夹下定义一个store文件夹

count.ts

import { defineStore } from "pinia";

//定义并暴露一个store  第一个参数是id
export const useCountStore=defineStore('count',{

    //数据
    state() {
        return{
            sum:0,
            n:1
        }
    },

    //方法
    actions:{

    },
    
})

用pinia读取数据

2.修改数据

修改数据的三种方式如下

<template>
    <h2>测试一下pinia</h2>
    <br>
    <span>当前求和为：{{ countStore.sum }}</span>
    <br>
    <select v-model.number="countStore.n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
    <br>
    <button @click="change">修改pinia里面的数据</button>
</template>


<script lang="ts" setup>
    import { ref } from 'vue';
    import { useCountStore } from '../store/count';
import { sum } from 'element-plus/es/components/table-v2/src/utils.mjs';
    let countStore=useCountStore()

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

    function minus(){
        countStore.sum-=countStore.n
    }

    function change(){
        //1.直接修改
        //countStore.sum=666


        //2.批量修改
/*         countStore.$patch(
            {
                sum:999,
                n:88
            }        ) */

        //3.借助action修改（action中可以编写一些业务逻辑）  
        countStore.Multiply(10) 

    }

</script>

count.ts

import { defineStore } from "pinia";

//定义并暴露一个store  第一个参数是id
export const useCountStore=defineStore('count',{

    //数据
    state() {
        return{
            sum:0,
            n:1
        }
    },

    //方法
    actions:{
        Multiply(value:number){
            this.sum*=value
        }
    },
    
})

3.storeToRefs（toRefs）

• 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。

• 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中的所有进行转换(包括数据和方法，而方法是不需要我们进行转换的)

4.getters（computed）

定义

 使用

这个东西相当于前面学过的computed 

5.$subscribe的使用（watch）

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

    //mutate:本次修改的信息
    //state：发生了什么变化
    countStore.$subscribe((mutate,state)=>{
        
        console.log("这个仓库里面的数据发生了改变",mutate,state)
    
    })

点击”加“按钮

这个东西相当于前面学过的watch