当前位置：首页 > 编程日记 > 正文

Vue学习计划-Vue3--核心语法（七）pinia

编程日记 2024-01-10 10:11:53

pinia案例gitee地址

1. `pinia`

准备一个效果

【搭建 pinia 环境】

安装pinia: npm install pinia/yarn add 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选项

3.【存储+读取数据】

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

// 引入defineStore用于创建store
import {defineStore} from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      sum:6
    }
  },
  // 计算
  getters:{}
})

具体编码：

// 引入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>

4. 【修改数据】(三种方式)

直接修改
countStore.sum = 666
批量修改

countStore.$patch({
  sum:999,
  school:'美丽的学校'
})

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
      }
    }
  },
  /*************/
})

组件中调用action即可

// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.increment(n.value)

5.【storeToRefs】

借助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)
  function Add(){
    // 第一种修改数据的方法
    <!-- countStore.sum += n.value -->
    sum.value += n.value
  }
  
</script>

6.【getters】

概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。
追加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()
    }
  }
})

组件中读取数据：

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

7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化, 类似于watch

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

8. 【store组合式写法】

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'

export const useTalkStore = defineStore('talk', () => { // 写成函数形式
  // vue语法，定义响应式数据,talkList就相当于state
  let talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string ) || [])
  // function就相当于actions中的方法
  async function getATalk(){
    // 获取数据， 连续解构 + 重命名
    const {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    let obj = {id: nanoid(),title}
    talkList.unshift(obj)
  }
  // 最后需要return出去
  return { talkList, getATalk }
})

# vue3 学习路程vue.js学习javascript

https://www.dkcj.cn/info/653.html

Yolov11-detect训练自己的数据集

至此，整个YOLOv11的训练预测阶段完成，与YOLOv8差不多。欢迎各位批评指正。

编程日记2024/11/14 15:00:04

HackQuest介绍 web3 学习平台

官网地址： https://www.hackquest.io/zhHackQuest是一个专注于Web3技术教育的在线学习平台，旨在帮助全球开发者掌握区块链、加密货币和去中心化应用（DApps）领域的最新技能。该平台汇聚了超过14000名活跃开发者，与100多个领先的Web3生态系统和项目紧密合作，为用户提供全面的教育资源。

编程日记2024/09/26 16:30:22

YOLOv10训练自己的数据集

至此，整个YOLOv10的训练预测阶段完成，与YOLOv8差不多。欢迎各位批评指正。

编程日记2024/06/03 11:00:02

YOLOv10环境搭建、模型预测和ONNX推理

运行后会在文件yolov10s.pt存放路径下生成一个的yolov10s.onnxONNX模型文件。安装完成之后，我们简单执行下推理命令测试下效果，默认读取。终端，进入base环境，创建新环境。（1）onnx模型转换。

编程日记2024/05/27 16:00:02

一键部署 SpringCloud 微服务，这套流程值得学习一波儿！

一键部署 springcloud 微服务，需要用到 Jenkins K8S Docker等工具。本文使用jenkins部署，流程如下图开发者将代码push到git运维人员通过jenkins部署，自动到git上pull代码通过maven构建代码将maven构建后的jar打包成docker镜像并 push docker镜像到docker registry通过k8s发起发布/更新服务操作其中 2~5步骤都会在jenkins中进行操作。

编程日记2024/04/05 00:30:03

一键部署 SpringCloud 微服务，这套流程值得学习一波儿！

编程日记2024/03/19 22:30:02

YOLOv7-Pose 姿态估计-环境搭建和推理

终端，进入base环境，创建新环境，我这里创建的是p38t17(python3.8，pytorch1.7)安装pytorch：（网络环境比较差时，耗时会比较长）下载好后打开yolov7-pose源码包。imgpath：需要预测的图片的存放路径。modelpath:模型的存放路径。Yolov7-pose权重下载。打开工程后，进入设置。

编程日记2024/03/15 17:00:02

深度学习硬件基础：CPU与GPU

CPU：叫做中央处理器（central processing unit）作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元。[^3]可以形象的理解为有25%的ALU(运算单元)、有25%的Control(控制单元)、50%的Cache(缓存单元)GPU：叫做图形处理器。

编程日记2024/02/04 13:00:04

YOLOv8-Detect训练CoCo数据集+自己的数据集

至此，整个训练预测阶段完成。此过程同样可以在linux系统上进行，在数据准备过程中需要仔细，保证最后得到的数据准确，最好是用显卡进行训练。有问题评论区见！

编程日记2024/02/02 17:00:03

使用JavaScript实现复杂功能：一个完整的电商网站搜索功能

随着互联网的发展，电子商务网站已经成为人们购物的重要平台。而在这些网站中，搜索功能无疑是核心功能之一。用户可以通过搜索快速找到他们需要的商品，从而提高购物体验。本文将详细介绍如何使用JavaScript实现一个完整的电商网站搜索功能。

编程日记2024/01/27 08:54:23

JavaScript DOM之Cookie详解

随着互联网的不断发展各种基于互联网的服务系统逐渐多了起来，我们常常需要记录访问者的一些信息，比如用户的账号，购物车存储的商品等，就需要用到cookie技术。cookie最早是网景公司发明的，是一种跟踪用户会话的技术。可以理解为本地缓存，它由服务器生成，保存在用户本地浏览器上的小文本文件，它可以包含与用户相关的信息。

编程日记2024/01/25 21:52:10

NRF24L01模块传输MPU6050数据，接收端数据一直为0问题记录

问题描述：一、发射端1、正确配置NRF模块，以及测试过能够正常通信，在发射端的发射线程中进行了如下操作2、这里是获取了陀螺仪的x轴数据，将其而分为两个8位的数据存入发送缓冲区中。因为一个陀螺仪x轴数据是16位的，所以对其进行了拆分，这里只获取gyro的x轴数据进行发送，目的是进行测试。3、这个是发送函数，只要把发送缓冲区的地址作为参数传入就可以发送了。二、接收端1、接收端的NRF24L01模块也正确配置后，在接收线程中进行如下操作2、读取NRF传输过来的数据，存到接收BUF中，然后打印

编程日记2024/01/24 19:59:36

YOLOv5中Ghostbottleneck结构shortcut=True和shortcut=False有什么区别

GhostBotleneck结构中的shodcut=True和shorcut=False的区别在干是否使用残差连接。当shorcu=True时，使用残差连接，可以以加速模型的收敛速度和提高模型的准确率，当shorcu=False时，不使用残差连接，可以减少模型的参数数量和计算量。实际上不只是Ghostbottleneck具有残差连接，在C3、C2f等具有Bottleneck模块的结构均可根据此例举一反三。残差块是深度卷积神经网络中的一种基本模块，可以有效地解决梯度消失和梯度爆炸的问题。

编程日记2024/01/24 19:56:37

说说你对 TypeScript 的理解？与 JavaScript 的区别？

超集，不得不说另外一个概念，子集，怎么理解这两个呢，举个例子，如果一个集合 A 里面的的所有元素集合 B 里面都存在，那么我们可以理解集合 B 是集合 A 的超集，集合 A 为集合 B 的子集。其是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。通过类型批注提供在编译时启动类型检查的静态类型，这是可选的，而且可以忽略而使用。如果缺乏声明而不能推断出类型，那么它的类型被视作默认的动态。等数据格式，对象的类型就是用接口来描述的。的语法，所以任何现有的。对于基本类型的批注是。

编程日记2024/01/24 10:38:58

python基础小知识：引用和赋值的区别

通过引用，就可以在程序范围内任何地方传递大型对象而不必在途中进行开销巨大的赋值操作。不过需要注意的是，这种赋值仅能做到顶层赋值，如果出现嵌套的情况下仍不能进行深层赋值。赋值与引用不同，复制后会产生一个新的对象，原对象修改后不会影响到新的对象。如果在原位置修改这个可变对象时，可能会影响程序其他位置对这个对象的引用

编程日记2024/01/22 22:24:27

elementPlust 的el-select在提示框关闭时自动弹出

主要问题就是因为filterable属性，根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件，下拉框出现/隐藏时触发。当el-select添加filterable属性时，弹提示窗时，点击确定后，下拉框会自动弹出。console.log('弹窗出select', item)增加了visible-change事件。el-select事件最后增加焦点取消。

编程日记2024/01/22 16:06:44

在react中说说对受控组件和非受控组件的理解？以及应用场景

这时候当我们在输入框输入内容时，会发现输入的内容无法显示出来，此时input标签是一个可读的状态，因为value被this.state.username所控制，当用户输入时，this.state.username不会自动更新，这样的话input的内容就不会发生变化了，想要解除被控制，可以为input标签设置onChange事件，触发的时候更新state，从而导致input框内容更新。简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。

编程日记2024/01/22 09:38:31

基于深度学习的细胞感染性识别与判定

通过引入深度学习技术，我们能够更精准地识别细胞是否受到感染，为医生提供更及时的信息，有助于制定更有效的治疗方案。基于深度学习的方法通过学习大量样本，能够自动提取特征并进行准确的感染性判定，为医学研究提供了更高效和可靠的手段。通过引入先进的深度学习技术，我们能够实现更快速、准确的感染性判定，为医学研究和临床实践提供更为可靠的工具。其准确性和效率将为医学研究带来新的突破，为疾病的早期诊断和治疗提供更可靠的支持。通过大规模的训练，模型能够学到细胞感染的特征，并在未知数据上做出准确的预测。

编程日记2024/01/21 18:24:14

C#winform上位机开发学习笔记3-串口助手的信息保存功能添加

上位机开发的系列学习笔记，避免遗忘多记录多补充多优化

编程日记2024/01/20 22:24:35

vue3 项目中 arguments 对象获取失败问题

在 vue3 项目中获取到的 arguments 对象与传入实参不符，打印出函数中的 arguments 对象如下...

编程日记2024/01/20 13:01:48

前端JS代码中Object类型数据的相关知识

遍历JavaScript中的对象有几种方法，包括使用for…in循环、Object.keys()方法、Object.values()方法和Object.entries()方法。因此前端传入了日期类型数据之后，如果和后台数据库中的数据类型不一致，比如数据库中的日期数据类型格式是。前端传入的Object对象中其中某个字段值是日期类型的数据，则在前端的类型就是一个。，则数据传往后端之前需要做格式类型转换。，它的值是一个中国标准时间，比如。

编程日记2024/01/19 23:04:05

Redis的key过期策略是怎么实现的

这是一道经典的Redis面试题，一个Redis中可能存在很多很多的key，这些key中可能有很大一部分都有过期时间，此时Redis服务器咋知道哪些key已经过期，哪些还没过期呢？如果直接遍历所有的key，这显然是行不通的，效率非常低！！Redis整体的策略是定期删除和惰性删除相结合。举个栗子：假如我去小卖铺买东西，付款的时候，发现东西过期了。就告知老板，于是老板下架此产品。消费者发现过期了，才去下架，这就叫。小卖铺老板主动定期抽取一部分商品，进行筛查，这就叫定期删除。

编程日记2024/01/18 23:41:32

一键式Excel分词统计工具：如何轻松打包Python脚本为EXE

最近，表姐遇到了一个挑战：需要从Excel文件中统计出经过分词处理的重复字段，但由于数据隐私问题，这些Excel文件不能外传。这种情况下，直接使用Excel内置功能好像是行不通的，需要借助Python脚本来实现。为了解决这个问题，我写了一个简单的数据分析和自动化办公脚本，以方便使用。想象一下，即使电脑上没有安装Python，也能通过一个简单的EXE文件轻松完成工作，这是多么方便！因此，我决定不仅要写出这个脚本，还要学会如何将其打包成一个独立的EXE文件。这样，无需Python环境的电脑也能直接运行它

编程日记2024/01/18 21:39:56

Vue学习计划-Vue3--核心语法（七）pinia

1. `pinia`

3.【存储+读取数据】

4. 【修改数据】(三种方式)

5.【storeToRefs】

6.【getters】

7.【$subscribe】

8. 【store组合式写法】

相关文章：

Yolov11-detect训练自己的数据集

HackQuest介绍 web3 学习平台

YOLOv10训练自己的数据集

YOLOv10环境搭建、模型预测和ONNX推理

一键部署 SpringCloud 微服务，这套流程值得学习一波儿！

一键部署 SpringCloud 微服务，这套流程值得学习一波儿！

YOLOv7-Pose 姿态估计-环境搭建和推理

深度学习硬件基础：CPU与GPU

YOLOv8-Detect训练CoCo数据集+自己的数据集

使用JavaScript实现复杂功能：一个完整的电商网站搜索功能

JavaScript DOM之Cookie详解

NRF24L01模块传输MPU6050数据，接收端数据一直为0问题记录

YOLOv5中Ghostbottleneck结构shortcut=True和shortcut=False有什么区别

说说你对 TypeScript 的理解？与 JavaScript 的区别？

python基础小知识：引用和赋值的区别

elementPlust 的el-select在提示框关闭时自动弹出

在react中说说对受控组件和非受控组件的理解？以及应用场景

基于深度学习的细胞感染性识别与判定

C#winform上位机开发学习笔记3-串口助手的信息保存功能添加

vue3 项目中 arguments 对象获取失败问题

前端JS代码中Object类型数据的相关知识

Redis的key过期策略是怎么实现的

一键式Excel分词统计工具：如何轻松打包Python脚本为EXE

深入解析JavaScript的原生原型

深入三目运算符：JavaScript、C++ 和 Python 比较

深入解析JavaScript中new Function语法

javascript的变量存储机制和原理

uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错

将 RGB 转换为十六进制、生成随机十六进制

nodemon（自动重启 node 应用程序）的安装与使用

1. pinia

3.【存储+读取数据】

4. 【修改数据】(三种方式)

5.【storeToRefs】

6.【getters】

7.【$subscribe】

8. 【store组合式写法】

相关文章：

1. `pinia`