5.14 学习vue3

搭建pinia环境

• 下载pinia 终端输入：pnpm i pinia

操作src/main.ts

• 第一步：引入pinia

  import { createPinia } from "pinia";

• 第二步：创建pinia

  
  const pinia = createPinia()

• 第三步：安装pinia

  
  app.use(pinia)

存储+读取数据

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>