【前端开发——vue3】学习笔记（3）——pinia环境、自定义事件、组件通信、插槽等

5. pinia

5.1【准备一个效果】

<img src="./images/pinia_example.gif" alt="pinia_example" style="zoom:30%;border:3px solid"/>

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选项

<img src="https://cdn.nlark.com/yuque/0/2023/png/35780599/1684309952481-c67f67f9-d1a3-4d69-8bd6-2b381e003f31.png" style="zoom:80%;border:1px solid black;border-radius:10px" />

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:{}

})

具体编码：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:{}

})

组件中使用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.【修改数据】(三种方式)

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

countStore.sum = 666

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

countStore.$patch({

  sum:999,

  school:'atguigu'

})

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

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {

  /*************/

  actions: {

    //加

    increment(value:number) {

      if (this.sum < 10) {