Vue3快速上手（三）

今天我要分享的是Vue3中pinia，组件通信，slot、Vue3中的其他API和新组件等相关知识，话不多说，赶紧上干货！！！

5. pinia

5.1【pinia简介】

Pinia 是一个用于 Vue.js 应用程序的状态管理库。这个库提供了一个简单且直观的 API 来管理 Vue.js 应用程序的状态。Pinia 是作为 Vue.js 官方状态管理库 Vuex 的一种轻量级替代方案而创建的。它的目标是提供一个更加简单和灵活的 API，同时还保留 Vuex 的主要功能，如状态管理、动作和获取器。

Pinia 的一些关键特性包括：

简单易用的 API：Pinia 的 API 设计简洁明了，易于理解和使用。这使得状态管理变得更加直观，让开发者可以更快速地上手和使用。
****开箱即用的开发工具：****Pinia 集成了 Vuex 的开发者工具，使得开发者可以轻松地跟踪状态变化和调试代码。
灵活的状态组织方式：与 Vuex 中的模块不同，Pinia 允许开发者自由地组织和管理状态。这使得在大型应用中管理状态变得更加灵活和方便。
与 Vue 3 的组合式 API 无缝集成：Pinia 能够与 Vue 3 的组合式 API 无缝集成，使得状态管理代码更加的清晰和模块化。
更好的 TypeScript 支持：Pinia 提供了出色的 TypeScript 支持，允许开发者在编写代码时获得类型提示和自动补全，提高代码的质量和可维护性。
总的来说，Pinia 是一个强大而灵活的状态管理库，它的设计目标是让开发者可以更加轻松和高效地管理 Vue.js 应用程序的状态。

5.2【搭建 pinia 环境】

第一步：npm install pinia

第二步：操作src/main.ts

import {
   
    createApp } from 'vue'
import App from './App.vue'

/* 引入createPinia，用于创建pinia */
import {
   
    createPinia } from 'pinia'

/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)

/* 使用插件 */{
   
   }
app.use(pinia)
app.mount('#app')

此时开发者工具中已经有了pinia选项

5.3【存储+读取数据】

1. Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

3. 具体编码：src/store/count.ts

   // 引入defineStore用于创建store
   import {
        
        defineStore} from 'pinia'
   
   // 定义并暴露一个store
   export const useCountStore = defineStore('count',{
        
        
     // 动作
     actions:{
        
        },
     // 状态
     state(){
        
        
       return {
        
        
         sum:6
       }
     },
     // 计算
     getters:{
        
        }
   })
   

4. 具体编码：src/store/talk.ts

   // 引入defineStore用于创建store
   import {
        
        defineStore} from 'pinia'
   
   // 定义并暴露一个store
   export const useTalkStore = defineStore('talk',{
        
        
     // 动作
     actions:{
        
        },
     // 状态
     state(){
        
        
       return {
        
        
         talkList:[
           {
        
        id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
        		{
        
        id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
           {
        
        id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
         ]
       }
     },
     // 计算
     getters:{
        
        }
   })
   

5. 组件中使用state中的数据

   <template>
     <h2>当前求和为：{
       
       { sumStore.sum }}</h2>
   </template>
   
   <script setup lang="ts" name="Count">
     // 引入对应的useXxxxxStore	
     import {useSumStore} from '@/store/sum'
     
     // 调用useXxxxxStore得到对应的store
     const sumStore = useSumStore()
   </script>
   

   <template>
   	<ul>
       <li v-for="talk in talkStore.talkList" :key="talk.id">
         {
       
       { talk.content }}
       </li>
     </ul>
   </template>
   
   <script setup lang="ts" name="Count">
     import axios from 'axios'
     import {useTalkStore} from '@/store/talk'
   
     const talkStore = useTalkStore()
   </script>
   

5.4.【修改数据】(三种方式)

1. 第一种修改方式，直接修改

   countStore.sum = 666
   

2. 第二种修改方式：批量修改

   countStore.$patch({
        
        
     sum:999,
     school:'atguigu'
   })
   

3. 第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

   import {
        
         defineStore } from 'pinia'
   
   export const useCountStore = defineStore('count', {
        
        
     /*************/
     actions: {
        
        
       //加
       increment(value:number) {
        
        
         if (this.sum < 10) {
        
        
           //操作countStore中的sum
           this.sum += value
         }
       },
       //减
       decrement(value:number){
        
        
         if(this.sum >