当前位置: 首页 > web >正文

Vue-16-前端框架Vue之应用基础集中式状态管理pinia(一)

文章目录

  • 1 Pinia
  • 2 示例效果
    • 2.1 App.vue(根组件)
    • 2.2 Count.vue
    • 2.3 LoveTalk.vue(使用axios)
  • 3 搭建pinia环境
    • 3.1 main.ts
    • 3.2 开发者工具
  • 4 存储和读取数据
    • 4.1 Count.ts
    • 4.2 Count.vue
    • 4.3 loveTalk.ts
    • 4.4 LoveTalk.vue
  • 5 修改数据的三种方式
    • 5.1 第一种和第二种修改方式
      • 5.1.1 Count.ts
      • 5.1.2 Count.vue
    • 5.2 第三种修改方式
      • 5.2.1 Count.ts
      • 5.2.2 Count.vue
      • 5.2.3 loveTalk.ts
      • 5.2.4 LoveTalk.vue

使用pinia存储和读取数据,介绍三种修改数据的方式:单个修改、批量修改、使用actions中的自定义动作修改。

1 Pinia

Pinia的官网地址
符合直觉的状态管理库。
在这里插入图片描述
集中式状态(数据)管理。
React->redux
vue2->vuex
vue3->pinia

作用:用于多个组件共享数据。

2 示例效果

在这里插入图片描述
npm install axios
npm install nanoid,生成随机Id。

2.1 App.vue(根组件)

<template
http://www.xdnf.cn/news/14857.html

相关文章:

  • Linux 系统管理:高效运维与性能优化
  • MySQL索引失效场景
  • OpenWrt | 使用 Docker 运行 iperf3
  • 深度解析基于贝叶斯的垃圾邮件分类
  • android BottomSheet及AlertDialog的几种material3 常见ui的用法
  • 链表题解——设计链表【LeetCode】
  • 贪心算法在C++中的应用与实践
  • 机器学习-- 神经网络
  • 认识 Spring AI
  • 【Springai】项目实战进度和规划
  • Android阴影效果的艺术与实现:从入门到精通
  • 【冷知识】Spring Boot 配置文件外置
  • [15-2] 读写内部FLASH读取芯片ID 江协科技学习笔记(20个知识点)
  • YOLOv13:最新的YOLO目标检测算法
  • AlpineLinux安装部署MongoDB
  • Flutter 布局之 IntrinsicHeight 组件
  • 浪潮和曙光服务器的ipmi配置教程
  • jenkins集成sonarqube(使用token进行远程调用)
  • 【硬核数学 · LLM篇】3.1 Transformer之心:自注意力机制的线性代数解构《从零构建机器学习、深度学习到LLM的数学认知》
  • Springboot + vue + uni-app小程序web端全套家具商场
  • Junit_注解_枚举
  • 网络安全2023—新安全新发展
  • Java 案例 6 - 数组篇(基础)
  • 【知识图谱构建系列7】:结果评价(1)
  • DBeaver 设置阿里云中央仓库地址的操作步骤
  • 基于hive的电商用户行为数据分析
  • Webpack原理剖析与实现
  • 【嵌入式ARM汇编基础】-ELF文件格式内部结构详解(三)
  • 《AI for Science:深度学习如何重构基础科学的发现范式?》
  • 用户行为序列建模(篇十)-【加州大学圣地亚哥分校】SASRec