最新版本Vue3的学习笔记-第五章（上部）

最新版本Vue3的学习笔记-第一章

最新版本Vue3的学习笔记-第二章

最新版本Vue3的学习笔记-第三章(上部)

最新版本Vue3的学习笔记-第三章（下部）

最新版本Vue3的学习笔记-第四章

最新版本Vue3的学习笔记-第五章（上部）

5. pinia

5.1【准备一个效果】

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 > 1){
           this.sum -= value
         }
       }
     },
     /*************/
   })
   

4. 组件中调用action即可

   // 使用countStore
   const countStore = useCountStore()
   
   // 调用对应action
   countStore.incrementOdd(n.value)
   

---

项目源码有帮助到你的，清点个小星星