Vue3快速上手(十七)Vue3之状态管理Pinia

在这里插入图片描述

一、简介

Pinia官网:https://pinia.vuejs.org/zh/
从官网截图里可以直接看到,pinia是一个vuejs的状态(数据)管理工具。功能性同vuex。logo是小菠萝。它是一个集中式状态管理工具。就是将多个组件共用的数据管理起来,重复利用。有点类似缓存的意思。
在这里插入图片描述

二、Pinia环境搭建

2.1 引入Pinia依赖

npm install pinia

wangdy@mb vue3_study % npm install pinia
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'rollup@4.9.4',
npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vite@5.0.11',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }
npm WARN EBADENGINE }added 2 packages in 2s
wangdy@mb vue3_study % 

2.2 配置使用Pinia

编辑main.ts,引入Pinia,创建Pinia,使用Pinia即可

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
/* 引入路由器 */
import router from './router'
/* 引入Pinia */
import { createPinia } from 'pinia'
const app = createApp(App)
// 创建Pinia
const pinia = createPinia()
// 使用Pinia
app.use(pinia)
// 使用路由器
app.use(router)
app.mount('#app')

配置后,在vue开发者工具里就可以看到Pinia了。
在这里插入图片描述

三、Pinia操作数据

设定一个场景,模拟用户登录,将用户基本信息存入pinia,在其他页面使用并展示。

3.0 场景:

Login.vue

<template><div class=""><input type="text" v-model="userLogin.userName" /><br><input type="text" v-model="userLogin.pwd" /><br><button @click="login">登录</button>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LVGL-按钮按钮矩阵部件】

LVGL-按钮&按钮矩阵部件 ■ LVGL-按钮部件■ 按钮部件&#xff1a; 点击三个按钮一个回调函数修改label值。 ■ LVGL-按钮矩阵部件■ 示例一&#xff1a;按钮换行&#xff0c;和宽度设置。■ 示例二&#xff1a;设置按钮宽度为2倍■ 示例三&#xff1a;获取点击的按钮下标&…

大数据主要组件HDFS Iceberg Hadoop spark介绍

HDFSIceberghadoopspark HDFS 面向PB级数据存储的分布式文件系统&#xff0c;可以存储任意类型与格式的数据文件&#xff0c;包括结构化的数据以及非结构化的数据。HDFS将导入的大数据文件切割成小数据块&#xff0c;均匀分布到服务器集群中的各个节点&#xff0c;并且每个数据…

服务器感染了.kat6.l6st6r勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 随着信息技术的不断发展&#xff0c;网络安全问题愈发凸显&#xff0c;其中勒索病毒成为了一种常见的网络威胁。近期&#xff0c;一种名为.kat6.l6st6r的勒索病毒引起了广泛关注。该病毒通过加密用户文件并要求支付赎金的方式&#xff0c;给受害者带来了巨大…

Gartner发布网络安全应用生成式AI指南:应用生成增强功能提升企业网络安全能力和效率的三个领域及9个实例

生成增强功能是专门为提高知识工作者的生产力、解决网络安全技能短缺问题并降低大型语言模型带来的风险而构建的。安全和风险管理领导者通过在运营中采用生成增强来提高团队的能力。 主要发现 与其他人工智能实现相比&#xff0c;生成式人工智能 (GenAI)解决方案&#xff0c;特…

CSP认证——202012-1 期末预测之安全指数

题目背景 期末要到了&#xff0c;小菜同学找到了自己的好朋友顿顿&#xff0c;希望可以预测一下自己这学期是否会挂科。 题目描述 首先&#xff0c;顿顿选取了如“课堂表现”、“自习时长”、“作业得分”、“社团活动参与度”等 项指标作为预测的依据。 然后&#xff0c;顿…

绿色节能|AIRIOT智慧建材能耗管理解决方案

建材供应是建筑业不可或缺的一个重要环节&#xff0c;在环保和企业可持续发展的双重需求下&#xff0c;建材生产商对建材生产过程中的能耗掌握和能耗管理尤其关注。但在实际生产和运营过程中&#xff0c;传统的建材能耗管理方式往往存在如下痛点&#xff1a; 用户管理权限不完善…

汽车ECU的虚拟化技术(五) -- 对MCU虚拟化实现难点的思考

目录 1.概述 2.虚拟化软件的难点 2.1 虚拟化中的中断处理 2.2 虚拟ECU的通信 3.小结 1.概述 在上面文章里汽车ECU的虚拟化技术(四) -- 对MCU虚拟化实现难点的思考-CSDN博客&#xff0c;解了OEM面临新的电子电气架构下的集成难点&#xff0c;引入了hypervisor以及VM调度机制…

react中使用google map展示地图

1. 安装插件 google-maps-react npm install google-maps-react --save 2. 使用 import React, { Component } from "react"; import { Map, GoogleApiWrapper, Marker } from "google-maps-react";class MapContainer extends Component {render() {co…

ARM-Linux 开发板下安装编译 OpenCV 和 Dlib

安装 OpenCV 和 Dlib 不像在 x86 平台下那样简单&#xff0c;用一句命令就可以自动安装完。而在 ARM 平台中许多软件都需要自行下载编译&#xff0c;且还有许多问题&#xff0c;本篇文章就是记录在 ARM 平台下载 OpenCV 踩过的坑。 硬件环境&#xff1a; RK3568 Ubuntu20.04…

全国大学生数学建模大赛备赛——相关系数的求解(皮尔逊(pearson)、斯皮尔曼(spearman)、肯德尔(kendall)相关系数)

相关系数是用来衡量两个变量之间线性相关程度的指标。它的取值范围在-1到1之间&#xff0c;当相关系数为1时表示两个变量完全正相关&#xff08;即一个变大另一个也变大&#xff09;&#xff0c;当相关系数为-1时表示两个变量完全负相关&#xff08;即一个变大另一个变小&#…

【Flutter】数据库操作的基本介绍

上一篇博文介绍了Flutter 如何读取 excel 文件&#xff0c;这一篇我们来介绍如何操作数据库。 Flutter 提供了三种数据持久化方式&#xff1a; 将 KV 值存储到硬盘&#xff1a;shared_preferences读取和写入文件&#xff1a;Read and write files数据库&#xff1a;sqflite。…

实现节流防止连点方法以及调用方式

1、新建throttle.js文件&#xff0c;复制该代码 export function throttle(fn, delay) { let latestTime 0 return function() { const _this this const _arguments arguments const nowTime new Date().getTime() if (nowTime - latest…

定制 Elasticsearch 镜像

安装ik分词器 下载ik分词器 下载地址&#xff1a;https://github.com/infinilabs/analysis-ik/releases Dockerfile FROM docker.elastic.co/elasticsearch/elasticsearch:8.12.2 COPY ./elasticsearch-analysis-ik-8.12.2.zip /opt/ RUN bin/elasticsearch-plugin instal…

IOS面试题编程机制 16-20

16. 详述iOS 中的事件的传递:响应链?事件沿着一个指定的路径传递直到它遇见可以处理它的对象。 首先一个UIApplication 对象从队列顶部获取一个事件并分发(dispatches)它以便处理。 通常,它把事件传递给应用程序的关键窗口对象,该对象把事件传递给一个初始对象来处理。 初始…

国产DSP FT-M6678开发-网络开发

简介 今天准备调试FT-M6678的网络部分,参考例程是《3. FT-M6678 Project\1. FT-M6678 接口驱动函数\13. GMAC\NDK 协议栈工程-V7.1\03应用例程\UDP\DSP端应用程序\DSP_UDP_Test_V7》,首先参照文档将NDK使用官方提供的NDK进行替换: 将D:\ti\pdk_C667…

FMEA助力新能源汽车行业腾飞:安全、效率双提升

随着新能源汽车市场的迅猛发展&#xff0c;各大车企纷纷加大研发力度&#xff0c;力求在激烈的市场竞争中脱颖而出。其中&#xff0c;FMEA&#xff08;故障模式与影响分析&#xff09;作为一种先进的质量管理工具&#xff0c;正被越来越多地应用于新能源汽车的研发和生产过程中…

Redis中的常用数据结构

目录 String类型 Hash类型 List类型 Set类型 SortedSet类型 全局命令 集合中的交并补 String类型 //set,get型set key valueget key//设置一个10s后过期的键值对 ex单位是sset key value ex 10 或者 setex key 10 value//设置一个10ms后过期的键值对 px单位是msset key…

Vue 面试题(二)

目录 上一篇:Vue 常见面试题(一)-CSDN博客 11、Vue 组件 data 为什么必须是函数&#xff08;必会&#xff09; 12、讲一下组件的命名规范&#xff08;必会&#xff09; 13、怎么在组件中监听路由参数的变化&#xff1f;&#xff08;必会&#xff09; 14、怎么捕获 Vue 组件…

深度学习pytorch——链式法则(Chain rule)(持续更新)

这篇文章将会以深度学习的角度解析链式法则。 基本的求导法则 高中的时候就学过&#xff0c;大学高数也巩固了一遍&#xff0c;这里不再赘述。 深度学习中的链式法则 为什么要讲述深度学习中的链式法则&#xff1f; 通过链式法则&#xff0c;我们可以得到中间层信息&#x…

unbantu Apache的基本配置与配置静态资源访问

目录 前言: 1.Apache介绍 2.安装Apache 3. 测试Apache服务是否启动成功 3.1配置Servername 3.2重启服务 4.配置Apache主页面 5. 配置静态的资源 6.为静态资源设置访问权限(基于源地址) 致谢: 前言: 此博客是基于unbantu的Apache服务的详细解析&#xff0c;在这片博…