vue3中状态管理库pinia的安装和使用方法介绍及和vuex的区别

Pinia 与 Vuex 一样,是作为 Vue 的“状态存储库”,用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。

当该数据、方法在很多地方都需要使用或需要通过页面保存的数据,如显示在导航栏中用户信息,一个多步骤表单页面等,这时我们就可以使用Store了。

Pinia 的主要特点:
  • 简单易用:Pinia 的 API 简洁明了,易于学习和使用。它提供了一些基本的操作方法,如设置状态、获取状态、删除状态等。
  • 适用于 Vue 3:Pinia 是专门为 Vue 3 设计的,它充分利用了 Vue 3 的新特性,如 Composition API、Teleport 等。
  • 可扩展性:Pinia 是一个可扩展的状态管理库,你可以根据自己的需求来添加更多的功能和操作方法。
  • 持久化支持:Pinia 支持状态持久化,你可以轻松地将状态保存到本地存储中,并在需要时恢复状态。
  • 插件化:Pinia 支持插件化,你可以通过插件来添加更多的功能,如日志记录、状态监控等。
如何使用:
  • 安装 Pinia:使用 npm 或 yarn 安装 Pinia 库。
  • 创建存储:在 Vue 应用中创建一个存储对象,用于存储所有共享状态。
  • 设置状态:使用 defineState 方法来定义状态,并使用 setup 方法将状态注入到组件中。
  • 操作状态:使用 useStore 钩子函数来获取存储对象,并使用其提供的方法来操作状态。
  • 持久化状态:使用 persist 插件来将状态保存到本地存储中,并在需要时恢复状态。
1.安装
npm install pinia
2.定义
/ stores/counter.jsimport { defineStore } from 'pinia'
//defineStore 接受一个 id,不同数据源的 id 必须是不同的
export const useCounterStore = defineStore('counter', {//相当于data,数据state: () => {return { count: 0 }},//相当于methods,方法actions: {increment() {this.count++},},//相当于computed,计算属性getters: {getCount(state) {// 自动完成!return state.count},},
})

在上面的代码中,我们通过 defineStore 方法创建了一个名为 counter 的 Store。其中,id 是一个唯一的标识符,可以用来跨 Store 之间进行通信。

在 Store 中,我们定义了一个名为 count 的状态,以及名为 increment 的操作。这个操作可以通过 this 来访问当前 Store 中的状态,从而实现对状态的变更。

我们还定义了一个名为 getCount 的 getter,它可以返回 count 的值。

参数:

  • state:状态的初始值,推荐使用的是一个 箭头函数,方便进行类型推断。

  • getters:状态的获取,是一个对象格式;推荐配置为每个 getters 的对象属性为 箭头函数,方便进行类型推断;在使用时等同于获取该函数处理后的 state 状态结果;并且与 Vue 的计算属性一样,该方法也是惰性的,具有缓存效果。

  • actions:类似 Vue 中的 methods 配置项,支持异步操作,主要作用是 处理业务逻辑并更新状态数据;另外,此时的 actions 是一个 函数集合对象,与 getters 不同的是 不建议使用箭头函数。并且函数内部的 this 就指向当前 store 的 state。

3.使用

然后你在一个组件中使用它:

import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()counter.count++// 或使用 actioncounter.increment()<template>
{{counter.getCount}}
</template>

在上面的代码中,我们通过 useCounterStore 方法获取到了 useCounterStore Store 的实例。然后我们可以通过 counter.count 访问到当前 Store 中的状态,以及通过 counter.increment()counter.getCount() 来调用相应的操作。

pinia和vuex的对比
特性Vuex (Vue2)Pinia (Vue3)
数据存储State 存储在 Store 中State 存储在 Store 中
数据修改commit/mutationaction
响应式使用 Vue 响应式系统实使用 Vue 3 的响应式系统实现
数据获取gettersgetters
模块化模块按照功能划分,每个模块有自己的 state、mutation、action 和 getter模块按照功能划分,每个模块有自己的 state、action 和 getter
TypeScript 支持需要额外安装 @vue/cli-plugin-typescript 插件,并在 store 中进行类型定义内置 TypeScript 支持,使用起来更加方便

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

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

相关文章

【Python】开始你的Python之旅(Anaconda、Pycharm、Jupyter)

Python工具准备 下载安装AnacondaPycharmJupyter Notebook 启动使用AnacondaPycharmJupyter Notebook 引言&#xff1a; 信息时代&#xff0c;计算机引领。人工智能&#xff0c;Python是基础。信息时代学习好Python乃是在人工智能时代的立足之本。 本文&#xff1a; 做好Pyth…

开发者必备的 Github 加速工具(截至2024年01月)

开始闲聊前&#xff0c;我要感谢大神小青龍总结的博文&#xff1a;作为程序员不得不知道的几款Github加速神器&#xff0c;给我们介绍了常用&#xff08;较为合规&#x1f604;&#xff09;的加速方法。毕竟 github 是开发者绕不过的宝库。 背景 我用 Github 将近12年&#x…

JS鼠标事件总结学习

首先我们先简单过一遍鼠标MouseEvent事件&#xff1a; click: 当鼠标单击元素时触发。dblclick: 当鼠标双击元素时触发。mousedown: 当按下鼠标按钮时触发。mouseup: 当释放鼠标按钮时触发。mousemove: 当鼠标指针在元素上移动时触发。mouseover: 当鼠标指针移动到元素上方时触…

C++精进之路之路(九)内存模型和名称空间

C鼓励程序员在开发程序时使用多个文件。一种有效的组织策略是&#xff0c;使用头文件来定义用户类型&#xff0c;为操纵用户类型的两数提供两数原型&#xff1a;并将两数定义放在一个独立的源代码文件中。头文件和源代码文代一起定义和实现了用户定义的类型及其使用方式。最后&…

初步认识架构分层

一般初创软件&#xff0c;为快速上线&#xff0c;几乎不考虑分层。但随业务越发复杂&#xff0c;就会导致逻辑复杂、模块相互依赖、代码扩展性差等各种问题。 架构分层迫在眉睫。 1 什么是架构分层? 软件工程中常见的设计方式&#xff0c;将整体系统拆分成N个层次&#xff0c;…

C#进制--2进制、10进制、16进制(Modbus通讯部分)详解

引言&#xff1a;最近接触了一些通讯方面信息&#xff0c;写个小结记录一下&#xff0c;即时更新 1.二进制数&#xff1a; 是计算技术中经常采用的一种数制。二进制数据是由0和1两个基本数码来表示的数。它的基数为2&#xff0c;进位规则是“逢二进一”&#xff0c;借位规则是…

软件测试错题集(黑盒、白盒测试)

所有判断题第二个选项是正确答案 1.[判断题] 不存在质量很高但可靠性很差的产品。 错 对 2.[判断题] 软件测试按照测试过程分类为黑盒、白盒测试。 对 错 3.[判断题] 从软件开发者的角度出发,普遍希望通过软件测试暴露软件中隐藏的错误和缺陷,以考虑用户是否可接受该产品。 …

3D空间漫游技术的日趋成熟,让博物馆数字化大放异彩!

随着科技的飞速发展&#xff0c;互联网已经成为人们生活中不可或缺的一部分。在这个数字化时代&#xff0c;博物馆也紧跟时代潮流&#xff0c;将传统的实体博物馆与现代科技相结合&#xff0c;诞生了一种全新的博物馆形式——3D线上博物馆。这种新型博物馆凭借其独特的魅力&…

Flutter 三点三:Dart Stream

Stream Stream用于接收异步事件Stream 可以接收多个异步事件Stream.listen()方法返回StreamSubscription 可用于取消事件订阅&#xff0c;取消后&#xff0c;不再接收事件 基本使用 Stream.fromFutures([Future.delayed(Duration(seconds: 1),(){return "事件1";})…

SemCms外贸网站商城系统 SQL注入漏洞复现(CVE-2023-50563)

0x01 产品简介 SemCms是国内团队打造的专门针对外贸网站的开源CMS,主要用于外贸企业,兼容IE,Firefox等主流浏览器。建设商城性质的外贸网站,多语言(小语种)网站。 0x02 漏洞概述 SemCms外贸网站商城系统SEMCMS_Function.php 中的 AID 参数存在SQL注入漏洞,未经身份认…

数据库:基础SQL知识+SQL实验2

&#xff08;1&#xff09;基础知识&#xff1a; 1.JOIN&#xff08;连接&#xff09;&#xff1a; 连接操作用于根据指定的条件将两个或多个表中的数据行合并在一起。JOIN 可以根据不同的条件和方式执行&#xff0c;包括等值连接、不等值连接等。 &#xff08;1&#xff09…

自制Java镜像发布到dockerhub公网使用

文章目录 问题现象解决制作Java镜像发布使用 问题现象 书接上回&#xff0c;上周处理了一个docker问题&#xff0c;写了篇博客&#xff1a;自定义docker镜像&#xff0c;ubuntu安装命令并导出我们使用谷歌的jib插件打包&#xff0c;详情可以参考这篇文章&#xff1a;Spring Bo…

联想M7400加粉后如何清零

联想M7400黑白激光多功能打印一体机加粉后清零方法&#xff1a; 吴中函 加粉后&#xff0c;确保硒鼓已经被正确安装并且机器已经通电。 1、打开前盖&#xff0c;以便进行后续的操作。 2、按下“清除/返回”键&#xff0c;这会触发一个屏幕提示&#xff1a;提示内容为“更换…

ros2 ubuntu 20.04 安装 foxy

设置区域设置 确保您有一个支持UTF-8. 如果您处于最小环境&#xff08;例如 docker 容器&#xff09;中&#xff0c;则区域设置可能是最小的&#xff0c;例如POSIX. 我们使用以下设置进行测试。但是&#xff0c;如果您使用不同的 UTF-8 支持的区域设置&#xff0c;应该没问题。…

VM安装虚拟机及初始化操作

一、VM下载及暗转 虚拟机指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统&#xff0c;在实体计算机中能够完成的工作在虚拟机中都能够实现。VMware 是一款功能强大的桌面虚拟计算机软件&#xff0c;提供用户可在单一的桌面上同时运行不同的…

python毕设选题 - flink大数据淘宝用户行为数据实时分析与可视化

文章目录 0 前言1、环境准备1.1 flink 下载相关 jar 包1.2 生成 kafka 数据1.3 开发前的三个小 tip 2、flink-sql 客户端编写运行 sql2.1 创建 kafka 数据源表2.2 指标统计&#xff1a;每小时成交量2.2.1 创建 es 结果表&#xff0c; 存放每小时的成交量2.2.2 执行 sql &#x…

463岛屿周长

题目 给定一个 row x col 的二维网格地图 grid &#xff0c;其中&#xff1a;grid[i][j] 1 表示陆地&#xff0c; grid[i][j] 0 表示水域。 网格中的格子 水平和垂直 方向相连&#xff08;对角线方向不相连&#xff09;。整个网格被水完全包围&#xff0c;但其中恰好有一个…

GreatSQL社区2023全年技术文章总结

GreatSQL社区自成立以来一直致力于为广大的数据库爱好者提供一个交流与学习的平台。在2023年&#xff0c;我们见证了社区的蓬勃发展&#xff0c;见证了众多技术文章的诞生与分享。 此篇总结呈现GreatSQL社区2023年社区技术文章在CSDN发布的全部。这些文章涵盖了GreatSQL、MGR、…

自动驾驶HWP的功能定义

一、功能定义 高速路自动驾驶功能HWP是指在一般畅通高速公路或城市快速路上驾驶员可以放开双手双脚&#xff0c;同时注意力可在较长时间内从驾驶环境中转移&#xff0c;做一些诸如看手机、接电话、看风景等活动&#xff0c;该系统最低工作速度为60kph。 如上两种不同环境和速度…

知识笔记(七十)———tp5中的增删改查(详细)

增 添加多条数据 添加多条数据直接向 Db 类的 insertAll 方法传入需要添加的数据即可 $data [[foo > bar, bar > foo],[foo > bar1, bar > foo1],[foo > bar2, bar > foo2] ]; Db::name(user)->insertAll($data); 助手函数写法 // 添加单条数据 db(…