Vue3 pinia管理数据的3种方式代码
作者：小馒头学python
在Vue3中Pinia是一个状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态,这篇文章主要给大家介绍了关于Vue3 pinia管理数据的3种方式,需要的朋友可以参考下
第一种
我们首先将需要的代码文件呈现一下
<template>
<div class="count">
<h2>当前求和为：{{ countStore.sum }}</h2>
<h3>欢迎来到:{{ countStore.school }}，坐落于：{{ countStore.address }}</h3>
<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="_jian">减</button>
</div>
</template>
<script setup lang='ts' name="Count">
import {ref} from 'vue'
import {useCountStore} from '@/store/Count'
const countStore = useCountStore()
let n = ref(1)
function _add(){
function _jian(){
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
还有Count.ts
import {defineStore} from 'pinia'
export const useCountStore = defineStore('Count',{
// 真正存储数据的地方
state(){
return {
sum:2,
school:'北京大学',
address:'北京'
}
}
})
第一种修改方式属于拿到就可以修改
countStore.sum+=n.value
第二种
第二种修改方式是，适用场景是很多数据需要同时的变更
countStore.$patch({
sum:888,
school:'清华大学',
address:'北京'
})
第三种
第三种方法是使用action
在Count.ts中将action写好
actions:{
increment(value){
if( this.sum < 10){
// 修改数据（this是当前的store）
this.sum += value
}
}
}
再回到Count.vue加一行
countStore.increment(n.value)
这样就可以修改了
附：vue代码里监听 pinia的某个属性
我们可以使用 watch 函数或 watchEffect 函数来监听 pinia的变化。
使用 watch 函数来监听 pinia 的变化：
<template>
<div>
Count: {{ pinia.count }}
<button @click="pinia.addCount"></button>
</div>
</template>
<script setup>
import { watch } from 'vue'
<code>import { myPinia} from './pinia'
const pinia = myPinia()
watch(() => pinia .count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})</code>
<code></script> </code> 总结
以上就是在Vue3中使用Pinia管理数据的三种方式
到此这篇关于Vue3 pinia管理数据的3种方式的文章就介绍到这了,更多相关Vue3 pinia管理数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！