Pinia的安装及使用

一、pinia是什么?

        Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着全局状态。它有点像一个永远存在的组件,每个组件都可以读取和写入它。它有三个概念,state、getter 和 action,我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

二、应该在什么时候使用 pinia?

        一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据,例如显示在导航栏中的用户信息,以及需要通过页面保存的数据,例如一个非常复杂的多步骤表单。

        另一方面,你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据,例如,一个元素在页面中的可见性。

        并非所有的应用都需要访问全局状态,但如果你的应用确实需要一个全局状态,那 Pinia 将使你的开发过程更轻松。

​三、pinia的安装

        1、选择自己的包管理器进行安装

yarn add pinia
# 或者使用 npm
npm install pinia

        2、在main.ts文件中创建一个pinia实例并将其传递给应用

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

        3、在项目文件目录中的src文件夹下新建stores文件夹,然后创建自己的store即可,如下图:

具体写法可以参考下一篇文章:

也可以参考pinia官网定义 Store | Pinia值得你喜欢的 Vue Storeicon-default.png?t=N7T8https://pinia.vuejs.org/zh/core-concepts/ 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【调试笔记-20240602-Linux-在 OpenWRT-23.05 上配置 frps 与 frpc 之间使用 TLS 进行传输】

调试笔记-系列文章目录 调试笔记-20240602-Linux-在 OpenWRT-23.05 上配置 frps 与 frpc 之间使用 TLS 进行传输 文章目录 调试笔记-系列文章目录调试笔记-20240602-Linux-在 OpenWRT-23.05 上配置 frps 与 frpc 之间使用 TLS 进行传输 前言一、调试环境操作系统:O…

hadoop疑难问题解决_NoClassDefFoundError: org/apache/hadoop/fs/adl/AdlFileSystem

1、问题描述 impala执行查询:select * from stmta_raw limit 10; 报错信息如下: Query: select * from sfmta_raw limit 10 Query submitted at: 2018-04-11 14:46:29 (Coordinator: http://mrj001:25000) ERROR: AnalysisException: Failed to load …

QLocalSocket和QLocalServer

一步一步来吧,不可能一口吃成一个胖子. 看不懂大块的代码,至少可以看懂一个小demo,一小部分代码,小demo看的多了,慢慢也就可以看懂更多代码啦.加油! 不要着急啦! QLocalServer和QLocalSocket单进程和进程通信 - wjbooks - 博客园 (cnblogs.com) QLocalSocket 1.生成随机数 Q…

数字智能数字人直播带货软件系统 实现真人形象的1:1克隆 前后端分离 带完整的安装代码包以及搭建教程

系统概述 数字智能数字人直播带货小程序源码系统是一套集人工智能、3D建模、云计算等技术于一体的综合性解决方案。该系统通过深度学习算法,能够实现对真人形象的精准捕捉和1:1克隆,使数字人在直播过程中呈现出与真人无异的表现力。同时,系统…

超级搜索神器来了!比Kimi更好用的Perplexity AI,让你秒变搜索达人!

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

java——顺序表

前言:顺序表是线性表的一种,它是较于数组更加灵活的一种储存方式。线性表通常是逻辑上是连续的一条直线,但在物理上不是连续的。java中已经实现好了一个顺序表,搭配泛型可以支持各种类型的使用,下面就来介绍该如何使用…

AI绘画揽活新中式室内设计,能不能让你一见“粽”情?

端午节即将来临,计划节前完成的图赶出来了吗?别着急,可以找个AI绘画工具做帮手,让你在短时间内完成高质量的设计。 恰逢端午佳节,相比其他装修风格,新中式显然与端午节更般配,那么我们就用AI绘画的新中式风…

目标检测-AnyLabeling标注格式转换成YOLO格式

Anylabel可以极大的增加数据的标注效率,但是其标注格式如何能转换成YOLO标注格式,具体内容如下所示。 关于AnyLabeling的其它详细介绍如下链接所示 https://blog.csdn.net/u011775793/article/details/134918861 Github链接 https://github.com/vietanhd…

单点登录(SSO)前端怎么做

单点登录(SSO)前端怎么做 本文介绍单点登录(SSO)是什么,还有就是前端怎么做。 单点登录(SSO)是什么 单点登录(SSO,Single Sign On),是在企业内部…

vscode设置代码自动换行显示

☆ 问题描述 vscode设置代码自动换行显示 ★ 解决方案 ✅ 总结

学习使用Opentelemetry python SDK

前言 📢博客主页:程序源⠀-CSDN博客 📢欢迎点赞👍收藏⭐留言📝如有错误敬请指正! 一、什么是 OpenTelemetry OpenTelemetry 由 OpenTracing 和 OpenCensus 项目合并而成,是一组规范、工具、API…

[自学记录09*]Unity Shader:在Unity里渲染一个黑洞

一、前言 记得很久很久以前,在ShaderToy上看过一个黑洞的效果,当时感觉太*8帅了,于是这几天就尝试自己弄了一个。 Gargantua With HDR Bloom (shadertoy.com) 下面是我自己实现的黑洞 可以看到还是略逊一筹(感觉略逊百筹&#x…

Ubuntu系统本地搭建WordPress网站并发布公网实现远程访问

文章目录 前言1. 搭建网站:安装WordPress2. 搭建网站:创建WordPress数据库3. 搭建网站:安装相对URL插件4. 搭建网站:内网穿透发布网站4.1 命令行方式:4.2. 配置wordpress公网地址 5. 固定WordPress公网地址5.1. 固定地…

java版CRM客户关系管理系统源码:CRM客户关系管理系统的功能详解

CRM客户关系管理系统是一款功能全面的客户管理工具,旨在帮助企业和销售团队提高客户管理效率,优化销售流程。该系统包含多个模块,覆盖了从线索到回款的全流程管理,为用户提供了一个集成化的客户关系管理平台。 一、待办事项模块&a…

手机站怎么推广

随着手机的普及和移动互联网的快速发展,越来越多的人开始使用手机进行在线购物、社交娱乐、阅读资讯等,同时也催生了越来越多的手机站的出现。但是,在海量的手机站中,要让自己的手机站脱颖而出,吸引更多用户访问和使用…

Linux系统安装APITable详细流程与远程访问本地平台数据分析

文章目录 前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 💡推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击跳转到网站】 前言 v…

解决远程服务器连接报错

最近使用服务器进行数据库连接和使用的时候出现了一个报错: Error response from daemon: Conflict. The container name “/mysql” is already in use by container “1bd3733123219372ea7c9377913da661bb621156d518b0306df93cdcceabb8c4”. You have to remove …

时间卷积网络(TCN):概述及与CNN和RNN的比较

TCN 时间卷积网络(TCN):概述及与CNN和RNN的比较1. 时间卷积网络(TCN)定义与特点应用场景 2. 卷积神经网络(CNN)定义与特点应用场景 3. 循环神经网络(RNN)定义与特点应用场…

每周题解:单词环

题目链接 单词环 题目描述 我们有 n n n 个字符串,每个字符串都是由 a ∼ z a∼z a∼z 的小写英文字母组成的。 如果字符串 A A A 的结尾两个字符刚好与字符串 B B B 的开头两个字符相匹配,那么我们称 A A A 与 B B B 能够相连(注意…

2024-前端面试的正确打开方式(GitHub火爆场景题剖析)

写在前面 最近前端面试大家有没有感觉到场景题的压迫感!!! 很显然普通面试八股不会怎么更新,而且就前端来说,面试并不是真正困难的,常规八股显示不出面试者的技术水平。 前端作为一个技术行业&#xff0c…