vue3之pinia学习
最近查看了pinia这个状态管理管理，想跟大家一起学习下，下面是我的个人理解，希望对大家有帮助，我们开始吧！
第一步：安装pinia
npm install pinia
第二步：创建pinia
<script setup lang='ts'>
import {createPinia} from 'pinia'
import {createApp} from 'vue'
const app=createApp()
const pinia=createPinia()
app.use(pinia)
app.mount('#app')
</script>第三步：利用pinia进行存储数据以及读取数据
首先我们来操作存储数据，这里需要注意，在store文件夹下创建的ts文件，最好喝components中定义的组件文件名相似，用来表明存储的是某个组件中的数据
比如：
在src/components/Count.vue，那对应的在store/count.ts，这样我们就会很清楚的知道count.ts是存储计算相关的数据的，此时我们先来简单的写个count.ts，用来存放Count.vue组件的数据
import {defineStore} from 'pinia'
export const useCountStore=defineStore('count',{
actions:{
increment(value){//这里其实就是定义了一个方法，如果外部调用这个方法就会改变sum的值
if(this.sum<10){//actions中可以增加一些复杂的逻辑
this.sum+=value
}
}
}
state(){
return{
sum:2,
address:'shanghai'//这里就是存放数据的
}
},
getters:{
bigSum(state){
return state.sum*=10
},
upperAddress():string{
return this.address.toUpperCase()
}
}
})然后我们来使用这个store ,下面是第一种处理数据的方式，那么上面定义的方法该如何使用呢？
<template>
<div>
<h2>当前的和为：{{countStore.sum}}</h2>
<h2>当前的地址为：{{countStore.sum}}</h2>
</div>
</template>
<script>
import {ref} from 'vue'
import {storeToRefs} from 'pinia'
import {useCountStore} from '@/store/count'
const n=ref(1)
//使用这个store
const countStore=useCountStore()
function addBtn(){
countStore.sum+=n.value
}
function changeNumber(){
countStore.increment(n.value)//这里我们传递了一个值，就是n.value
}
</script>这里需要注意几个知识点：
1、storeToRefs：借助storeToRefs将store中的数据转为ref对象，方便在模板中使用，但是需要注意：pinia提供的storeToRefs只会将数据做转换，而vue的toRefs会转换store中的数据
2、当store中的数据，需要经过处理后再使用时，可以使用getters，因此需要再store中追加getters配置
<template>
<div>
<h2>当前数值为：{{n}}-放大十倍后的数值为：{{bigSum}}</h2>
<h2>当前所在的城市为：{{upperAddress}}</h2>
</div>
</template>
<script>
import {ref} from 'vue'
import {storeToRefs} from 'pinia'
import {useCountStore} from '@/store/count'
const n=ref(1)
const countStore=useCountStore()
const {sum,address,bigSum,upperAddress}=storeToRefs(countStore)
</script>最后，pinia中的有个类似订阅的方法，$subscribe
<template>
<div>
<h2>{{sum}}</h2>
</div>
</template>
<script>
import {ref} from 'vue'
import {useCountStore} from '@/store/count'
const countStore=useCountStore()
const {sum,address}=storeToRefs(countStore)
countStore.$subscribe((mutate,state)=>{
console.log('本次修改的信息为：',mutate)
})
</script>原文地址：https://blog.csdn.net/qq_29053519/article/details/145167939
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！