最近连续看了几个GitHub上的开源项目,里面都用到了 Pinia 这个状态管理库,于是研究了一下,发现确实是个好东西!那么,Pinia 的特点:

  • 轻量化 —— Pinia 体积约1KB,十分轻巧,加载运行都很快速,相对来说Vuex明显块头更大一些
  • Pinia 的 API 设计并非追求另辟蹊径,事实上它十分接近 Vuex 5的提案,并且对composition API非常友好(作者本身是Vue.js的核心成员,并且积极参与Vue Router以及Vuex的API设计)
  • 模块化设计,支持创建数个store(有点类似Vuex中的module),在打包时会被自动拆分
  • 跨模块调用十分直观方便,你可以在任意的 store 之间交叉组合使用
  • 完美支持Typescript,不得不说这个是Vuex的最大劣势之一,深度使用过Vuex + Ts的童鞋应该都懂
  • 可脱离组件使用,比如在编写router时调用
  • Vue devtools兼容(暂不支持个别功能点)
  • 同时支持Vue2/Vue3

  具体的使用细节就不照搬文档了,官网链接奉上 => Pinia

  值得一提的是,虽然文档使用英文编写,但是文档结构、语言组织等方面都属上乘,通俗易懂

  下面介绍几个亮点特性。

一、结构设计与Vuex API非常相似

这使得它学习成本很低,如果之前使用过Vuex的话,可以非常方便的上手

import { defineStore } from 'pinia'

interface AppState {
name: string;
} export const useUserStore = defineStore({
id: 'app',
state: (): AppState =>({
name: 'Eduardo'
}),
getters: {},
actions: {}
})

二、取消mutation,使用三种方式更改state

<script lang="ts" setup>
import { useStore } from '@/store/modules/app';
import { ref } from 'vue'; const store = useStore(); function raise() {
// 方式一:直接修改 -> 'direct'
store.salary += 10000; // 方式二:patch对象 -> 'patch object',填入打算更改的state字段即可
store.$patch({
salary: store.salary + 10000,
}); // 方式三:patch函数 -> 'patch function',可键入语句,执行复杂逻辑
store.$patch((state) => {
state.salary += 10000;
});
}
</script>

三、store使用reactive包裹,自带响应性

无需二次包裹reactive、computed,即可在模板中直接使用,同时具有响应性

<template>
<div>{{ store.name }}, 文章阅读量:{{ store.article }}</div>
<hr />
<button @click="jump">点击跳转阅读新文章</button>
</template>

四、跨模块调用直观方便

直接引入其他store的hook函数,调用即可

import { useSomeOtherStore } from './auth-store'

export const useAppStore = defineStore('app', {
state: () => ({
// ...
}),
actions: {
async someAction() {
const someOtherStore = useSomeOtherStore()
// ...
},
},
})

五、组件外调用

用户创建的类似useStore这样的Hook函数默认会自动注入在单页应用入口处创建并传递给app实例的Pinia实例(有点拗口...),在组建内使用时,Pinia实例肯定已经传递给app实例了,这时候直接调用hook函数使用就完事了。但在组件外使用时,很可能出现在调用hook函数时,Pinia实例还未传递给app实例,这时候就需要用户手动将Pinia实例传入hook函数,并暴露出来以供调用。具体可参见官方文档的对应章节 -> Using a store outside of a component

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { pinia } from '@/store' const app = createApp(App)
// 将pinia实例传递给app实例,在此之后使用useStore钩子,会自动注入pinia实例,否则需要在useStore中手动注入
app.use(pinia) app.mount('#app')
// store/index.ts
import { createPinia } from 'pinia' const pinia = createPinia()
export { pinia }
// store/modules/app.ts
import { defineStore } from 'pinia'
import { pinia } from '@/store' interface AppState {
name: string;
} export const useUserStore = defineStore({
id: 'app',
state: (): AppState =>({
name: 'Eduardo'
}),
getters: {},
actions: {}
}) // 这里的pinia即为通过createPinia()生成并在入口处传递给app实例的pinia实例,在此手动注入,并暴露
export function useAppStoreHook() {
return useAppStore(store)
}

最后,推荐大家尝试,真的好用~

轻量级状态管理库Pinia试吃的更多相关文章

  1. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  2. 比Redux更容易上手的状态管理库

    前言 当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如Re ...

  3. 记前端状态管理库Akita中的一个坑

    记状态管理库Akita中的一个坑 Akita是什么 Akita是一种基于RxJS的状态管理模式,它采用Flux中的多个数据存储和Redux中的不可变更新的思想,以及流数据的概念,来创建可观察的数据存储 ...

  4. vue3 自己做一个轻量级状态管理,带跟踪功能,知道是谁改的,还能定位代码。

    上一篇 https://www.cnblogs.com/jyk/p/14706005.html 介绍了一个自己做的轻量级的状态管理,好多网友说,状态最重要的是跟踪功能,不能跟踪算啥状态管理? 因为vu ...

  5. 网页前端状态管理库Redux学习笔记(一)

    最近在博客园上看到关于redux的博文,于是去了解了一下. 这个Js库的思路还是很好的,禁止随意修改状态,只能通过触发事件来修改.中文文档在这里. 前面都很顺利,但是看到异步章节,感觉关于异步说得很乱 ...

  6. 24 Flutter官方推荐的状态管理库provider的深入使用、初始化修改状态、父子组件同步状态

    加群452892873 下载对应24课文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^0.1.2 flutter_swi ...

  7. 23 Flutter官方推荐的状态管理库provider的使用

    加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^ flutter_swiper: ...

  8. 制作一个轻量级的状态管理插件:Vue-data-state

    Vuex 是不是有点繁琐? Vuex 是针对 Vue2 来设计的,因为 option API 本身有很多缺点,所以 Vuex 只好做各种补丁弥补这些缺点,于是变得比较"复杂". 现 ...

  9. 结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state

    一开始学习了一下 Vuex,感觉比较冗余,就自己做了一个轻量级的状态管理. 后来又学习了 Pinia,于是参考 Pinia 改进了一下自己的状态管理. 结合 Vuex 和 Pinia, 保留需要的功能 ...

随机推荐

  1. C语言中的.h和.c文件

    1.h为头文件,.c为源文件,其实两者都是代码,没有实质性的区别,只是后缀不一样,是一种编程规范,主要是为了解决定义与调用之间的混乱. 2.h文件一般写一些函数声明.宏定义.结构体等内容:c文件是程序 ...

  2. Docker原理:Cgroup

    目录 Cgroup 主要功能 术语 参考 Cgroup 全称Linux Control Group, 是Linux内核的一个功能,用来限制.控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等 ...

  3. 『动善时』JMeter基础 — 55、使用非GUI模式运行JMeter(命令行模式)

    目录 1.JMeter的非GUI模式说明 2.为什么使用非GUI模式运行JMeter 3.使用非GUI模式运行JMeter (1)非GUI模式运行JMeter步骤 (2)其它参数说明 4.CLI模式运 ...

  4. scrapy::Max retries exceeded with url

    运行scrapy时出错这个错误:Max retries exceeded with url解决方法: img1=requests.get(url=aa,headers=header1,timeout= ...

  5. ES6新增语法(三)——面向对象

    ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...

  6. java 实现中英文拼写检查和错误纠正?可我只会写 CRUD 啊!

    简单的需求 临近下班,小明忙完了今天的任务,正准备下班回家. 一条消息闪烁了起来. "最近发现公众号的拼写检查功能不错,帮助用户发现错别字,体验不错.给我们系统也做一个." 看着这 ...

  7. 【算法学习笔记】概率与期望DP

    本文学习自 Sengxian 学长的博客 之前也在CF上写了一些概率DP的题并做过总结 建议阅读完本文再去接着阅读这篇文章:Here 前言 单纯只用到概率的题并不是很多,从现有的 OI/ACM 比赛中 ...

  8. 网络损伤仪WANsim的功能与型号

    网络损伤仪简介 WANsim网络损伤仪是一款可以模拟真实的广域网状况的设备.它可以通过简单的数据填写模拟出时延.带宽抖动.丢包.乱序.误码.报文重复等网络状况. 大多数公司在进行产品测试时,只关注了应 ...

  9. CentOS 7命令行修改网卡名称

    在CentOS学习中,配置多个网卡,配置独立的IP地址,为网卡设置新的名称等,已经是必备技能,经小编亲测,以下方法能修改系统的网卡名称,操作步骤和截图一并和小伙伴们分享, 希望对大家的学习和使用有所帮 ...

  10. 【排序+模拟】谁拿了最多奖学金 luogu-1051

    题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 院士奖学金,每人$ 8000 $元,期末平均成绩高于\(80\)分(\(>80\)),并且在本 ...