关于程序员:Vue3-学习笔记Day4

写在后面

本文为尚硅谷禹神 Vue3 教程的学习笔记。本着本人学习、分享别人的态度，分享学习笔记，心愿能对大家有所帮忙。举荐先按程序浏览往期内容：\
1. Vue3 学习笔记（Day1） \
2. Vue3 学习笔记（Day2） \
3. Vue3 学习笔记（Day3）

::: block-1

目录

• 5 pinia

  • 5.1 筹备一个成果
  • 5.2 搭建 pinia 环境
  • 5.3 存储+读取数据
  • 5.4 批改数据(三种形式)
  • 5.5 storeToRefs
  • 5.6 getters
  • 5.7 $subscribe
  • 5.8 store组合式写法
    :::

5 pinia

P43：https://www.bilibili.com/video/BV1Za4y1r7KE?p=43

5.1 筹备一个成果

P44：https://www.bilibili.com/video/BV1Za4y1r7KE?p=44

5.2 搭建 pinia 环境

P45：https://www.bilibili.com/video/BV1Za4y1r7KE?p=45

第一步：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 存储+读取数据

P46：https://www.bilibili.com/video/BV1Za4y1r7KE?p=46

1. Store是一个保留：状态、业务逻辑 的实体，每个组件都能够读取、写入它。
2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。
3. 具体编码：src/store/count.ts

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

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

// 引入defineStore用于创立storeimport {defineStore} from 'pinia'// 定义并裸露一个storeexport 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 批改数据(三种形式)

P47：https://www.bilibili.com/video/BV1Za4y1r7KE?p=47

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即可

// 应用countStoreconst countStore = useCountStore()// 调用对应actioncountStore.incrementOdd(n.value)

5.5 storeToRefs

P48：https://www.bilibili.com/video/BV1Za4y1r7KE?p=48

• 借助storeToRefs将store中的数据转为ref对象，不便在模板中应用。
• 留神：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。

<template>    <div class="count">        <h2>以后求和为：{{sum}}</h2>    </div></template><script setup lang="ts" name="Count">  import { useCountStore } from '@/store/count'  /* 引入storeToRefs */  import { storeToRefs } from 'pinia'    /* 失去countStore */  const countStore = useCountStore()  /* 应用storeToRefs转换countStore，随后解构 */  const {sum} = storeToRefs(countStore)</script>

5.6 getters

P49：https://www.bilibili.com/video/BV1Za4y1r7KE?p=49

1. 概念：当state中的数据，须要通过解决后再应用时，能够应用getters配置。
2. 追加getters配置。

// 引入defineStore用于创立storeimport {defineStore} from 'pinia'// 定义并裸露一个storeexport const useCountStore = defineStore('count',{  // 动作  actions:{    /************/  },  // 状态  state(){    return {      sum:1,      school:'atguigu'    }  },  // 计算  getters:{    bigSum:(state):number => state.sum *10,    upperSchool():string{      return this. school.toUpperCase()    }  }})

3. 组件中读取数据

const {increment,decrement} = countStorelet {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

5.7 $subscribe

P50：https://www.bilibili.com/video/BV1Za4y1r7KE?p=50

通过 store 的 $subscribe() 办法侦听 state 及其变动

talkStore.$subscribe((mutate,state)=>{    console.log('LoveTalk',mutate,state)    localStorage.setItem('talk',JSON.stringify(talkList.value))})

5.8 store组合式写法

P51：https://www.bilibili.com/video/BV1Za4y1r7KE?p=51

import {defineStore} from 'pinia'import axios from 'axios'import {nanoid} from 'nanoid'import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{  // talkList就是state  const talkList = reactive(    JSON.parse(localStorage.getItem('talkList') as string) || []  )  // getATalk函数相当于action  async function getATalk(){    // 发申请，上面这行的写法是：间断解构赋值+重命名    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')    // 把申请回来的字符串，包装成一个对象    let obj = {id:nanoid(),title}    // 放到数组中    talkList.unshift(obj)  }  return {talkList,getATalk}})

<center>完结</center>

本文由mdnice多平台公布