当前位置：首页 > news >正文

Vue状态管理工具pinia的使用以及Vue组件通讯

news 2025/8/25 15:46:58

状态管理工具redux以及resso和zustand都用过了，这里pinia和resso是一样的，存储的状态数据直接写，方法也是直接写就可以了，会自动进行类型推断。

1.pinia的使用

首先入口文件引入pinia之后创建pinia对象用use安装pinia和路由一样

import { createApp } from "vue";
import App from './App.vue'
//引入pinia
import { createPinia } from "pinia";
const app =createApp(App)
//创建pinia
const pinia=createPinia()
//安装pinia
app.use(pinia)
app.mount('#app')

之后创建store文件夹，不同的数据以及数据方法单独创建文件。

然后用defineStore初始化store容器。

actions写方法，state写数据。

之后就可以在组件里面引入useCountStore函数调用生成countStore对象就可以引用里面的方法和数据了。

<template><div class="count"><h2>当前求和{{ sum }}</h2><select name="number" id="" v-model="n"><option value="1">1</option><option value="2">2</option></select><button @click="add">增</button><button @click="increase">减</button></div>
</template>
<script setup lang="ts" name="Count">import { ref } from 'vue';import {useCountStore} from '@/store/count'import { storeToRefs } from 'pinia';const countStore=useCountStore()console.log(countStore.sum);let {sum} = storeToRefs(countStore)let n =ref(1)const add=()=>{//第一种修改//countStore.sum=countStore.sum+Number(n.value)//第二种修改 可以一次修改多种数据// countStore.$patch({//     sum:+Number(n.value)// })//第三种修改方式actionscountStore.add(n.value)}const increase=()=>{countStore.sum=countStore.sum-Number(n.value) }//store的监听事件//subscribe回调函数接收两个参数 mutate修改的数据 state就是store存储的数据countStore.$subscribe((mutate,state)=>{console.log('state改变了',mutate,state);})
</script>
<style scoped>.count{background-color: aqua;}select{width: 50px;}button{height: 100px;width: 100px;background-color: aquamarine;color: #000;}
</style>

还有一个$subscribe可以监听store种的数据变化，mutate第一个参数是变化的数据，state就是存储的所以数据对象。