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

        状态管理工具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就是存储的所以数据对象。

2.Vue组件通讯的方式、

        包括之前的vue博客，并不是零基础的，是在写过完整的前端项目之后去学的，所以原理大致都是通的，只是方法用法不同。

        这里通讯方式其实和React是相通的，这里只是总结。

        

        这里和react一致。父子和子夫通过props操作。

        分享数据的组件on绑定事件，然后把数据放到回调函数中，然后触发事件的时候把参数传递之后，绑定事件的回调函数就会接收参数。

        记得组件卸载的时候解绑。和pubsub一致

        v-model双向绑定，无非就是把数据绑定到input的value上，然后@input事件发生的时候把value绑定到数据上，和react受控组件一个道理。

        

        父子传递props子没有接收就会放到attrs属性中，可以借此用props传递给孙组件。

        provide提供数据子组件inject拿。子获取父的时候需要父暴露数据，父获取子的实例对象也需要子暴露数据，不然数据是隐藏的。