Pina是可以可以用来帮助我们管理全局变量的信息，并进行相关的修改的组件，我们需要了解到的就是pinia从安装到使用的一系列流程。
首先需要做的是进行安装
npm install pinia
然后进行相关的创建和使用
import {createPinia} from ‘pinia’
const pinia = createPinia()
app.use(pinia)
在这之后，就相当于整个项目声明使用pinia了
如果希望使用pinia的话，需要在components同级文件夹之中创建store文件夹
然后在其中声明需要暴露的变量。
比如我们有一个全局变量sum
那么我们可以定义在比如一个count.ts中定义这个变量并进行暴露。
首先在上方进行引入定义state的相关函数，并在下方使用这个函数进行数值的定义
import {defineStore} from ‘pinia’
export const useCountStore = defineStore(‘count’,{
// 真正存储数据的地方
state(){
return {
sum:6
}
}
})
在之后就是对这个变量的使用
假如我们需要在Count.vue中进行使用。
首先是引入这个变量
import {useCountStore} from ‘@/store/count’
然后就可以利用这个函数获取到对应的全局变量
使用这个函数之后，就可以拿到变量中的值
useCountStore()
获取值的方式可以为
const countStore = useCountStore()
countStore.sum
或者 countStore.$state.sum
对于Pinia中数据的修改，也是符合直觉的，其提供了多种修改方式
最为简单的就是利用Store下的key进行修改
countStore.sum = 666
或者利用其提供的函数进行修改
countStore.$patch({
sum:999,
school:’atguigu’
})
或者一种在store声明的时候，往其中注册相关的action，之后就可以通过这些action进行相关的操作
actions:{
increment(value){
console.log(‘increment被调用了’,value)
if( this.sum < 10){
// 修改数据（this是当前的store）
this.sum += value
}
}
}
那么我们就可以进行相关的使用
counSotre.increment(n.value)
在action函数之中，pinia提供了this作为关键字从而方便我们去访问当前作用域的变量。
因此我们在actions中可以this.sum 进行访问，也可以this.$state.sum进行访问。
除此之外，还可以还可以利用toRefs，将相关的store的相关组件进行批量响应式处理
不过toRefs过于暴力，会将其下所有的结果都进行响应式处理
Pinia还提供了storeToRefs进行响应式处理，不过其中只会将数据进行转换
| <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> |
之后在store之中，还可以定义相关的getters函数
比如我们定义了state
| state(){
return { sum:1, school:’atguigu’ } }, // 计算 getters:{ bigSum:(state):number => state.sum *10, upperSchool():string{ return this. school.toUpperCase() } } |
这样我们就可以在store之中进行使用
store.bigSum,这样触发的就是对应的函数
在pinia之中，还提供了针对store之中的数值进行订阅的能力，当store发生了变化，能够第一时间收到变化。
const talkStore = useTalkStore()
之后我们对这个store进行订阅 $subscribe，
talkStore.$subscribe((mutate,state)=>{
console.log(‘talkStore里面保存的数据发生了变化’,mutate,state)
localStorage.setItem(‘talkList’,JSON.stringify(state.talkList))
})
这样我们可以在state之中获取到数据的变化，比如state.talkList
最后我们说下store的组合式写法
在store的定义之中，我们除了使用defineStore进行store的定义之外。
还可以直接传入参数进行暴露
| 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} }) |
上面我们利用函数加上json.parse
从localStorage之中取到了talkList，当取不到的时候，赋予一个空数组。
在action之中，则不需要使用this关键字，直接访问即可。