pinia 的使用(一)—— 基本介绍
官网地址:https://pinia.vuejs.org/
文章目录
- 1、Pinia 介绍
- ① 核心特性
- ② 核心概念
- Ⅰ. state
- Ⅱ. getters
- Ⅲ. actions
- Ⅳ. **提示:Pinia 中没有 mutations。**
- ③ 基本示例
- ④ Pinia vs Vuex
- ⑤ 关于名字
- ⑥ 关于作者
1、Pinia 介绍
一个全新的用于 Vue 的状态管理库。下一个版本的 Vuex,也就是 Vuex 5.0。
- Pinia最初是一个实验,目的是在2019年11月左右重新设计 Vue 状态管理在Composite API上的样子,也就是下一代 Vuex:
- 之前的Vuex主要服务于Vue2,Options API
- 如果想要在Vue3中使用Vuex,需要使用 4.x 版本:只是一个过渡的选择,还有很大的缺陷
- 所以在Vue3伴随着Composition API诞生之后,也设计了全新的Vuex:Pinia,也就是Vuex5
① 核心特性
- Vue2和Vue3都支持
- 除了初始化安装和SSR配置之外,两者的API都是相同的:官方文档中主要针对Vue3进行说明,必要的时候会提供Vue2的注释
- 支持VueDevTools
- 跟踪actions、mutations的时间线:在使用容器的组件中就可以观察到容器本身
- 支持time travel (时间旅行) 更容易的调试功能:在Vue2中Pinia使用Vuex的现有接口,所以不能与Vuex一起使用
- 但是针对Vue3中的调试工具支持还不够完美,比如还没有time-travel调试功能
- 模块热更新
- 无需重新加载页面即可修改您的容器:热更新的时候保持任何现有状态
- 支持使用插件扩展Pinia功能
- 相比Vuex有更好完美的TypeScript支持
- 支持服务端渲染
② 核心概念
- Pinia从使用角度和之前的Vuex几乎是一样的,比Vuex更简单了。
- 在Vuex中有四个核心概念:State、Getters、Mutations、Actions
- 在Pinia中:State、Getters、Actions (同步异步都支持)
- Store(如 Pinia)是一个保存状态和业务逻辑的实体,它不绑定到您的组件树。换句话说,它承载全局 state。它有点像一个始终存在的组件,每个人都可以读取和写入。它有三个核心概念。
Ⅰ. state
类似组件的 data
,用来存储全局状态
{todos: [{ id: 1, title: '吃饭', done: false },{ id: 1, title: '吃饭', done: true },{ id: 1, title: '吃饭', done: false }]
}
Ⅱ. getters
类似组件的 computed
,根据已有 State 封装派生数据,也具有缓存的特性
doneCount () {return todos.filter(item => item.done).length
}
Ⅲ. actions
类似组件的 methods
,用来封装业务逻辑,同步异步都可以;在 Vuex 中同步操作用 mutations,异步操作用 actions,太麻烦!!!
Ⅳ. 提示:Pinia 中没有 mutations。
③ 基本示例
这就是在 API 方面使用 pinia 的样子(请务必查看入门以获取完整说明)。您首先创建一个 store:
// stores/counter.js import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},// could also be defined as// state: () => ({ count: 0 })actions: {increment() {// 在 Vuex 中我们需要搞两步:1. 定义 mutations 2. 提交 mutationsthis.count++},}, })
然后在组件中使用它:
import { useCounterStore } from '@/stores/counter'export default {setup() {const counter = useCounterStore()counter.count++// with autocompletion ✨counter.$patch({ count: counter.count + 1 })// or using an action insteadcounter.increment()}, }
您甚至可以使用函数(类似于组件
setup()
)为更高级的用例定义 Store:export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment } })
如果你仍然不熟悉
setup()
Composition API,别担心,Pania 也支持类似Vuex 的一组地图助手。您以相同的方式定义商店,但随后使用mapStores()
,mapState()
,或mapActions()
:const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++}} })const useUserStore = defineStore('user', {// ... })export default {computed: {// other computed properties// ...// gives access to this.counterStore and this.userStore...mapStores(useCounterStore, useUserStore)// gives read access to this.count and this.double...mapState(useCounterStore, ['count', 'double']),},methods: {// gives access to this.increment()...mapActions(useCounterStore, ['increment']),}, }
您将在核心概念中找到有关每个地图助手的更多信息。
④ Pinia vs Vuex
- Pinia试图尽可能接近Vuex的理念。它旨在测试Vuex下一次迭代的提案,并且取得了成功,因为我们目前有一个针对Vuex5的开放式 RFC,其API与Pinia使用的 API 非常相似。请注意,Pinia的作者I (Eduardo) 是Vue.js核心团队的一员,并积极参与Router和Vuex等API的设计。我个人对这个项目的意图是重新设计使用全局Store的体验,同时保持 Vue 平易近人的哲学。我让Pania的API与Vuex一样接近,因为它不断向前发展,使人们可以轻松地迁移到Vuex,甚至在未来融合这两个项目(在Vuex下)。
- 关于版本问题:
- Vuex 当前最新版本是 4.x
- Vuex 4 用于 Vue 3
- Vuex 3 用于 Vue 2
- Pinia 当前最新版本是 2.x
- 既支持 Vue 2 也支持 Vue 3
- Pinia 可以认为就是 Vuex 5,因为它的作者是官方的开发人员,并且已经被官方接管了。
- 有两种可能(个人猜测):
- 把 Pinia 合并到 Vuex 中作为 Vuex 5.x
- 两个仓库独立发展,官方会推荐使用 Pinia
- 有两种可能(个人猜测):
- 我给大家的建议就是:可以直接去使用 Pinia。
- Pinia API 与 Vuex ≤4 有很大不同,即:
- 没有
mutations
。mutations 被认为是非常冗长的。最初带来了 devtools 集成,但这不再是问题。 - 不再有模块的嵌套结构。 您仍然可以通过在另一个 store 中导入和使用 store 来隐式嵌套 store,但 Pinia 通过设计提供扁平结构,同时仍然支持 store 之间的交叉组合方式。您甚至可以拥有 store 的循环依赖关系。
- 更好
typescript
支持。 无需创建自定义的复杂包装器来支持 TypeScript,所有内容都是类型化的,并且 API 的设计方式尽可能地利用 TS 类型推断。 - 不再需要注入、导入函数、调用它们,享受自动补全!
- 无需动态添加 stores,默认情况下它们都是动态的,您甚至不会注意到。 请注意,您仍然可以随时手动使用 store 来注册它,但因为它是自动的,所以您无需担心。
- 没有命名空间模块。 鉴于 store 的扁平架构,“命名空间” store 是其定义方式所固有的,您可以说所有 stores 都是命名空间的。
- 没有
- Pinia 就是更好的 Vuex,建议在你的项目中可以直接使用它了,尤其是使用了TypeScript 的项目。
⑤ 关于名字
- Pinia(发音
/peenya/
为英语)是最接近piña(西班牙语中的pineapple)的词,它是一个有效的包名。菠萝实际上是一组独立的花朵,它们结合在一起形成多种水果。与 stores 类似,每家 store 都是独立诞生的,但最终都联系在一起。它也是一种原产于南美洲的美味热带水果。
⑥ 关于作者
认识 Vue.js 开发团队。
pinia 的使用(一)—— 基本介绍相关推荐
- pinia和vuex的区别
文章目录 介绍 安装 pinia安装 vuex安装 创建 pinia创建 vuex创建 两者写法对比 pinia在vue3中的写法和用法 vuex在vue3中的写法和用法 Vuex 和 Pinia 的 ...
- Pinia食用指南-基础
前言 Pinia与Vuex的不同 基本用法 定义一个Store 在组件中使用 前言 Pinia ,发音为 /piːnjʌ/,来源于西班牙语 piña .意思为菠萝,表示与菠萝一样,由很多小块组成.在 ...
- Vue3.2单文件组件setup的语法糖总结
目录 前言 setup语法糖 一.基本用法 二.data和methods 三.计算属性computed 四.监听器watch.watchEffect 五.自定义指令directive 六.import ...
- pinia 介绍与安装
目录 一.什么是pinia 二.为什么要使用pinia 三.准备工作 1.基于Vue3 + TS + Vite创建项目 2.安装pinia 四.搭建pinia模块 1.在src下创建store目录,并 ...
- 学习pinia 介绍-State-Getters-Actions-Plugins
可爱小菠萝
- 全新的 Vue3 状态管理工具:Pinia
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
- pinia中文文档 指导文档中文翻译版 pinia指导中文翻译
Pinia 指导文档 中 文 翻 译 版 翻译者:jcLee95 Pinia 指导手册中文翻译地址(本文): https://blog.csdn.net/qq_28550263/article/det ...
- Pinia中action使用详解
actions的使用 动作相当于组件中的方法.它们可以使用actionsin 属性进行定义. 并且在pinia中的action既可以有同步函数也可以有异步函数. 在actions中可以通过this访问 ...
- Pinia的简单使用
首先,简单介绍下什么是Pinia? Pinia 是 Vue 的存储库,它允许跨组件/页面共享状态. Pinia特点 兼容vue2和vue3版本 删除mutations 现不能与vuex 混用 支持插件 ...
最新文章
- python 获取脚本所在目录
- Xcode真机调试(有证书)
- 一线专家谈2020年人工智能落地趋势
- java 计算工具类_java精确计算工具类
- JDK1.8的接口新特性
- mysql 主从 单表_MySQL主从复制单表或者多表
- opencv 指定分辨率_使用opencv拉伸图像扩大分辨率示例
- BitMap算法和Java的实现类BigSet
- 在ADF应用中,能够通过 oracle.adf.view.rich.security.FRAME_BUSTING 参数来使用framebusting功能。
- 做你的大玩具——轩小样儿的六一
- openwrt MT7620A编译dropbear
- mysql中将数字转化成汉字 基础
- 俞优静的“航海”人生-搜狐财经
- 搜索词分析工具-网站关键词挖掘
- 一个公司有m名推销员,他们都推销n种不同的产品。其中m>=l;m<=100,n>=l,n<=10。每天,每个推销员都要为售出的每一种产品交上来一个卡片。
- python: 七段数码管
- 怎么利用抖音海外版tiktok进行赚钱?
- python 维基百科爬虫_如何使用Python提取维基百科数据
- mysql proxool.xm_pom.xml · McAntilic_清水闲人/koala - Gitee.com
- java 出路 xls_java生成xls
热门文章
- 单例模式-懒汉式和恶汉式
- 亚马逊、Lazada、Shopee、速卖通、wish、eBay、沃尔玛、煤炉、阿里国际、Tik Tok测评(补单)是怎么操作的,核心关键是什么?
- 【QCA6174】SDX12 WiFi QCA6174 bdwlan30.bin和bdwlan30.txt相互转化操作说明
- 【通义听悟】音视频内容AI效率工具(包含公测福利)
- AI风起荆楚,人工智能中国体系即刻启航
- 次世代游戏模型师已经饱和了吗?
- Linux内核的主版本号、次版本号、修订版本号和开发版、稳定版的区分
- Python数据库操作【三】—— SQLServer
- 浙江杭电计算机系的秦嘉珩,迎新季丨@2019级杭电小萌新,你们的最美辅导员上线啦!...
- ZZULIOJ1019