VUE3.0---Pinia学习记录
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
Pinia优势
Pinia是一个全新的Vue状态管理库,是Vuex的代替者,尤雨溪强势推荐
- Vue2 和 Vue3 都能支持
- 抛弃传统的
Mutation
,只有state, getter
和action
,简化状态管理库 - 不需要嵌套模块,符合 Vue3 的 Composition api,让代码扁平化
- TypeScript支持
- 代码简介,很好的代码自动分割
Pinia 基本使用
初始化项目: npm init vite@latest 安装Pinia: npm i pinia
挂载Pinia
创建Store
使用Store
解构store
当store中的多个参数需要被使用到的时候,为了更简洁的使用这些变量,我们通常采用结构的方式一次性获取所有的变量名
ES传统方式解构(能获取到值,但是不具有响应性)
Pinia解构方法:storeToRefs
Pinia修改数据状态
简单数据修改
简单数据直接通过在方法中操作 store.属性名
来修改
多条数据修改
通过基础数据修改方式去修改多条数据也是可行的,但是在 pinia
官网中,已经明确表示$patch
的方式是经过优化的,会加快修改速度,对性能有很大好处,所以在进行多条数据修改的时候,更推荐使用 $patch
$patch
方法可以接受两个类型的参数,函数 和 对象
- $patch + 对象
- $patch + 函数: 通过函数方式去使用的时候,函数接受一个 state 的参数,state 就是 store 仓库中的 state
通过action修改
Store.actions中添加
changeState
方法
组件方法调用 store.方法名
Pinia中的Getters
Pinia 中的 getter 和 Vue 中的计算属性几乎一样,在获取 State值之前做一些逻辑处理
getter 中的值有缓存特性,如果值没有改变,多次使用也只会调用一次
- 添加 getter方法
- 组件内多次调用
1. getter 中不仅可以传递 state
直接改变数据状态,还可以使用 this
来改变数据
store之间的相互调用
在 Pinia 中,可以在一个 store
中 import
另外一个 store
,然后通过调用引入 store 方法的形式,获取引入 store
的状态
- 新建 store
- 在原 store 中引入 allanStore,并获取
moveList
- 组件中使用
mainStore.getAllanStoreList
总结
总得来说,Pinia 就是 Vuex 的替代版,可以更好的兼容 Vue2,Vue3以及TypeScript。在Vuex的基础上去掉了 Mutation,只保留了 state, getter和action。Pinia拥有更简洁的语法, 扁平化的代码编排,符合Vue3 的 Composition api
本文转载于:
https://juejin.cn/post/7078281612013764616
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
VUE3.0---Pinia学习记录的更多相关文章
- flask mega-tutorial 1.0 documentation学习记录
本文主要是记录在[用户登录]一节中出现的问题: 报错位置是在 if g.user is not None and g.user.is_authenticated(): return redirect( ...
- @vue/cli 4.0.5 学习记录
1. Vue CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示
因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...
- Vue3.0系列——「vue3.0学习手册」第一期
一.项目搭建 vite是尤大大开发的一款意图取代webpack的工具.其实现原理是利用ES6的import发送请求加载文件的特性.拦截这些请求,做一些编译,省去webpack冗长的打包时间.并将其与R ...
- vue3.0学习笔记
vue3转vue2: https://vue-next-template-explorer.netlify.app/ 1. Vue3.0六大两点 Performance:性能比Vue2.x快1.2~2 ...
- Vue3.0 Function API---------引用
1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...
- 2021新年 Vue3.0 + Element UI 尝鲜小记
2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术. 本文主要记录了使用 Vu ...
- 鲜衣怒马散尽千金,Vue3.0+Tornado6前后端分离集成Web3.0之Metamask钱包区块链虚拟货币三方支付功能
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_219 不得不承认,大多数人并不拥有或者曾经拥有加密货币.是的,Web3.0.加密货币.区块链,对于大多数的互联网用户来说,其实是一 ...
随机推荐
- NC207569 牛牛爱奇数
题目链接 题目 题目描述 在牛牛面前放着 \(n\) 个数,这些数字既有奇数也有偶数,只不过牛牛对奇数情有独钟,他特别想让这些数都变成奇数. 现在牛牛获得了一种能力,他可以执行一种操作:每次选中一个偶 ...
- Object.definePropety
defineProperty Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,也就是说,该方法允许精确地添加或修改对象的属 ...
- 承前启后,Java对象内存布局和对象头
承前启后,Java对象内存布局和对象头 大家好,我是小高先生.在我之前的一篇文章<并发编程防御装-锁(基础版)>中,我简要介绍了锁的基础知识,并解释了为什么Java中的任何对象都可以作为锁 ...
- 解决webservice接口调用报错:java.lang.ClassFormatError: Absent Code ... javax/mail/internet/MimeMultip
今天使用java axis调用.net发布的webservice接口报了个错,排查半天,感觉代码逻辑没问题,最后发现是jar包冲突!!! 调用接口相关代码: String url="http ...
- Spring源码之springMVC
目录 web.xml 程序入口 servlet 初始化 运行阶段 销毁阶段 DispatcherServlet 初始化 DispatcherServlet 的逻辑处理 web.xml 它的作用是配置初 ...
- Golang gRPC学习(05): retry重试
什么是重试 如果服务出现了错误,主要是网络,服务器出现了短暂异常的时候,该怎么办? 我们都会人工或者自动的重新连接服务试试,看服务是否恢复可用了. 这种重新进行连接服务的一种方式就是重试.如果是在微服 ...
- leetcode 将有序数组转换为二叉搜索树
给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 高度平衡 二叉搜索树. 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树. 示例 ...
- [BUUCTF][Web][GXYCTF2019]Ping Ping Ping 1
打开靶机对应URL 提示有ip参数 尝试构造url http://714ad4a2-64e2-452b-8ab9-a38df80dc584.node4.buuoj.cn:81/?ip=127.0.0. ...
- [BUUCTF][Web][HCTF 2018]WarmUp 1
这题已经标识为php 代码审计题,那么需要搞到源码才行 打开靶机对应的url,展示的是一张笑脸图片 右键查看网页源代码 <!DOCTYPE html> <html lang=&quo ...
- 【ACM专项练习#03】打印图形、栈的合法性、链表操作、dp实例
运营商活动 题目描述 小明每天的话费是1元,运营商做活动,手机每充值K元就可以获赠1元,一开始小明充值M元,问最多可以用多少天? 注意赠送的话费也可以参与到奖励规则中 输入 输入包括多个测试实例.每个 ...