搭建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