关于程序员: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 用于创立 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 批改数据(三种形式)

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

// 应用 countStore
const countStore = useCountStore()

// 调用对应 action
countStore.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 用于创立 store
import {defineStore} from 'pinia'

// 定义并裸露一个 store
export 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} = countStore
let {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 多平台公布