petty 状态管理库文档
自研 Petty 状态管理库产生背景
- petty 是一款适用于 vue2.5以下版本(目前已兼容vue2.5x 以上版本)的状态管理库,能够在 vue 2这种配置项的代码中,去实现类似于 vue3 里的 pinia、React 里的hook的调用形式,用函数式的编程思想去代替掉 vuex 这样的配置项的状态管理库,能让开发者在 vue2 里面尽情拥抱 hook
- 整个 petty 的灵感来源于 Hox 状态管理库(一款 React 的函数式状态管理),既然 React 可以,谁说 Vue 就不行呢
Petty 状态管理库的优势
- 支持 SSR,全部代码采用实例化的形式编写,在服务端渲染时返回的是一个实例,多请求不会造成状态污染
- 代码库体积非常小,正如它的命名 petty(小巧精致)
- 兼容 vuex 写法以及 vue3 的 pinia 写法,使用起来没有额外心智负担
- 语法糖采用 vue3 里的 ref 形式,在后续升级过渡中不会带来额外心智成本
- 函数式的状态管理库,随处定义随处使用
- 通过将一个个状态变成一个函数,打破 vuex 配置项的管理方式,让代码更加可拆分以及可维护
- 通过函数合并多个状态,符合人类思维
- 在vue2里面去实现类似 pinia、hook 这样的函数式编程,是 petty 设计的最大初衷
- 支持多种调用方式,你的 hook 状态管理库,不仅仅只能通过 hook
- 函数式天然支持异步,不再需要 action 和 mutation
- 支持 vuex 、pinia 的各种 helper 辅助开发
- 支持解构赋值
使用介绍
定义状态 store
- 是的,你返回的内容,就是你想需要共享的状态
- 是的,定义一个状态管理库就这么简单,无需额外配置项
- 是的,异步代码就和正常写异步代码一样,无需其它状态管理库中的 action、effect、redux-thunk 之类的额外配置
import {createStore} from 'petty';const myStore = createStore('myStore', function ({$patch, $active}) {const address = $active('somewhere');const age=12;function changeAddress() {address.value = 'right here';}return {name: 'jeff',age,address,changeAddress,};
});export default myStore;// 代码里使用
import myStore from './stroe/myStore';
const [store, dispatch] = myStore();<template><div id="app"><div>{{ store.name }}</div><div>{{ store.address.value }}</div></div>
</template>export default defineComponent({name: 'App',computed: {store: () => store,},mounted() {setTimeout(() => {dispatch({name: 'jack', address: 'wheee'});store.changeAddress();}, 1000);},
});
</script>
修改状态
直接修改(不推荐)
- 在 store 挂载的数据会被放到 vue 实例上,所以支持直接修改,但不推荐,这样会打破 flux 这类的单向数据流的模式
import myStore from './stroe/myStore';
const [store, dispatch] = myStore();<template><div id="app"><div>{{ store.name }}</div><div>{{ store.address.value }}</div></div>
</template>export default defineComponent({name: 'App',computed: {store: () => store,},mounted() {setTimeout(() => {store.name='xxx'store.address.value='xxx'}, 1000);},
});
</script>
通过dispatch修改(类 React 方式)
<script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {mounted() {setTimeout(() => {dispatch({name: 'xxx', address: 'xxx'});}, 2000);},
}
</script>
通过函数修改(类 vuex 、redux方式)
import {createStore} from '../pettyStore';
const myStore = createStore('myStore', function ({$patch, $active}) {const currentIndex = $active(0);const date = $active('2020年5月1日');const computedDate = function () {return `${date.value} -'今日'${Date().toLocaleLowerCase()}`;};const changeDate = dateStr => {date.value = dateStr;};return {name: 'myStore',currentIndex,date,computedDate,changeDate,};
});export default myStore;// 代码中
<script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {mounted() {setTimeout(() => {store.changeDate(countDate(index));}, 2000);},
}
</script>
修改 immutable 状态
- 对于在函数里面直接修改 string、number 这样的基础类型,为了让修改可以响应式,需要使用 $active 包裹,然后使用 .value 的形式改动,和 vue3 的 ref 语法糖一致
import {createStore} from '../pettyStore';
const myStore = createStore('myStore', function ({$patch, $active}) {const currentIndex = $active(0);const date = $active('2020年5月1日');const computedDate = function () {return `${date.value} -'今日'${Date().toLocaleLowerCase()}`;};const changeDate = dateStr => {date.value = dateStr;};return {name: 'myStore',currentIndex,date,computedDate,changeDate,};
});export default myStore;
定义 store 计算属性
- 定义计算属性也非常简单,直接返回函数即可
import {createStore} from '../pettyStore';
const myStore = createStore('myStore', function ({$patch, $active}) {const currentIndex = $active(0);const date = $active('2020年5月1日');const computedDate = function () {return `${date.value} -'今日'${Date().toLocaleLowerCase()}`;};const changeDate = dateStr => {date.value = dateStr;};return {name: 'myStore',currentIndex,date,computedDate,changeDate,};
});export default myStore;// 代码中
<template><div class="pie-cont"><div class="pie-date2">详细日期{{ computedDate }}</div></div>
</template>
<script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {computed: {store: () => store,computedDate: store.computedDate,}
}
</script>
异步操作
- 是的,异步操作也和正常写函数一样完全无感
import {createStore} from '../pettyStore';
const myStore = createStore('myStore', function ({$patch, $active}) {const currentIndex = $active(0);const date = $active('2020年5月1日');const computedDate = function () {return `${date.value} -'今日'${Date().toLocaleLowerCase()}`;};const changeDate = dateStr => {date.value = dateStr;};const changDateAsync = () => {new Promise(resolve => {setTimeout(() => {date.value = '2025年1月1日';resolve();}, 3000);});};return {name: 'myStore',currentIndex,date,computedDate,changeDate,changDateAsync,};
});export default myStore;// 代码里
<script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {mounted() {store.changDateAsync();},
}
</script>
多种方式引入 store
- 是的,除了能像上面的方式引入 petty
- 你还能在代码里通过 this.$petty 直接引入
// 代码里
<script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {mounted() {const useStore = this.$petty.stores.get('myStore');const [store,dispatch]=useStore();},
}
</script>
多状态 store 合并
- 是的,就是函数的导入和组装!
// otherStore
import {createStore} from '../pettyStore';
const myStore = createStore('otherStore', function ({$patch, $active}) {return {otherStoreName: 'other',};
});export default myStore;// myStore
import {createStore} from '../pettyStore';
import otherStore from './otherStore';const myStore = createStore('myStore', function ({$patch, $active}) {const currentIndex = $active(0);const date = $active('2020年5月1日');const computedDate = function () {return `${date.value} -'今日'${Date().toLocaleLowerCase()}`;};const changeDate = dateStr => {date.value = dateStr;};const getOtherStoreName = () => {const [oStore] = otherStore();return oStore.otherStoreName;};const changDateAsync = () => {new Promise(resolve => {setTimeout(() => {date.value = '2025年1月1日';resolve();}, 3000);});};return {name: 'myStore',currentIndex,date,computedDate,changeDate,changDateAsync,getOtherStoreName,};
});export default myStore;// 代码里
<template><div class="pie-cont"><div class="pie">男女比例饼图:</div><div class="pie-date">日期{{ store.currentIndex.value }}:{{ store.date.value }}</div><div class="pie-date2">详细日期{{ computedDate }}{{ store.getOtherStoreName() }}</div></div>
</template><script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {computed: {store: () => store,computedDate: store.computedDate,},mounted() {const useStore = this.$petty.stores.get('myStore');const [store,dispatch]=useStore();},
}
</script>
使用 mapHelper 简化开发
import { mapActions } from 'petty'export default {// ...methods: {...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`// `mapActions` 也支持载荷:'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`]),...mapActions({add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`})}
}
卸载 store、重制 store 为初始态
<script>
import myStore from './store/myStore';
const [store, dispatch] = myStore();export default {mounted() {this.$petty.$dispose('myStore')this.$petty.$reset('myStore')},
}
</script>
相关文章:
petty 状态管理库文档
自研 Petty 状态管理库产生背景 petty 是一款适用于 vue2.5以下版本(目前已兼容vue2.5x 以上版本)的状态管理库,能够在 vue 2这种配置项的代码中,去实现类似于 vue3 里的 pinia、React 里的hook的调用形式,用函数式的…...
SpringMVC学习记录(三)之响应数据
SpringMVC学习记录(三)之响应数据 一、页面跳转控制1、快速返回模板视图2、转发和重定向 二、返回JSON数据1、前置准备2、ResponseBody 三、返回静态资源1、静态资源概念2、访问静态资源 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为h…...
ENSP GVRP动态学习VLAN
手工配置的VLAN称为静态VLAN,通过GVRP协议创建的VLAN称为动态VLAN。 GVRP有三种注册模式,不同的模式对静态VLAN和动态VLAN的处理方式也不同。 GVRP的三种注册模式分别定义如下: Normal模式:允许动态VLAN在端口上进行注册…...
怎么给llama3.2-vision:90b模型进行量化剪枝蒸馏
对 LLaMA 3.2 Vision: 90B 模型进行量化、剪枝和蒸馏,涉及到模型的压缩和优化技术,以减少其计算量和内存占用。以下是实现这些步骤的一般流程: 1. 量化 (Quantization) 量化的目的是减少模型的精度(如从FP32到INT8)&…...
flutter 专题四 Flutter渲染流程
一、 Widget - Element - RenderObject关系 二、 Widget 、Element 、RenderObject 分别表示什么 2.1 Widget Widget描述和配置子树的样子 Widget就是一个个描述文件,这些描述文件在我们进行状态改变时会不断的build。但是对于渲染对象来说,只会使用最…...
刘艳兵-DBA028-您可以在 ORCL1 和 ORCL2 数据库都运行其实例的主机上安装“独立服务器的 Oracle 网格基础结构“。哪两个陈述是正确的?
您可以在 ORCL1 和 ORCL2 数据库都运行其实例的主机上安装"独立服务器的 Oracle 网格基础结构"。哪两个陈述是正确的?(选择两个) A 在完成“用于独立服务器的Oracle Grid Infrastructure”安装后,必须使用crsctl sta…...
前端三件套-css
一、元素选择器 元素选择器:利用标签名称。p,h1-h6...... 行内样式(内联样式):例如<p style"color:red;font-size:50px"> id选择器:针对某一个特定的标签来使用。以#定义。 class(类&a…...
实验(未完成)
一、拓扑图 二、需求及分析 1、需求 按照图示的VLAN及IP地址需求,完成相关配置。 要求SW1为VLAN 2/3的主根及主网关,SW2为VLAN 20/30的主根及主网关。 SW1和SW2互为备份。 可以使用super vlan。 上层通过静态路由协议完成数据通信过程。 AR1为企…...
Python基础学习_01
目录 1、注释 2、数字和数学计算 3、变量 4、字符串 5、打印 6、本节总结 1、注释 • 什么是注释? 1)注释就是用自然语言向代码阅读者说明代码的功能和意义 • 注释 1)单行注释使用 # 为开头;并且不能换行…...
鸿萌数据迁移服务: 企业服务器整机在线热迁移, 实现不停机业务转移
天津鸿萌科贸发展有限公司从事数据安全服务二十余年,致力于为各领域客户提供专业的数据存储、数据恢复、数据备份、数据迁移等解决方案与服务,并针对企业面临的数据安全风险,提供专业的相关数据安全培训。 鸿萌数据迁移业务为众多企业顺利高效…...
【C】无类型指针及函数指针
一、无类型指针 (1)无类指针只包含内存地址,不知道内存地址从存放数据是什么类型: void *ptrNULL; (2)可以其他类型赋给无类型指针,但是无类型指针赋给有类型指针会警号; …...
VR的左右眼渲染方法
VR的左右眼视频渲染shader unity_StereoEyeIndex 结点可以判断当前渲染的时候左眼还是右眼,所以可以通过着色器来更根据当前眼睛使用不同的渲染方式达到左右眼渲染不同。 Shader "Unlit/VRVideoPlay" {Properties{_MainTex ("Texture", 2D) …...
爬虫-------字体反爬
目录 一、了解什么是字体加密 二. 定位字体位置 三. python处理字体 1. 工具库 2. 字体读取 3. 处理字体 案例1:起点 案例2:字符偏移: 5请求数据 - 发现偏移量 5.4 多套字体替换 套用模板 版本1 版本2 四.项目实战 1. 采集目…...
vue2组件封装和UI组件的二次封装,方法,属性,ref的传递
封装组件使用v-model 使用方法props接受value值,当值发生变化的时候再通过this.$emit("input", newValue),则实现了简单组件的v-model封装,如果不使用第三方UI可以接受到的值使用watch或者计算属性保存,然后再通过事件派发自己保存…...
喜报!景联文科技成功通过DCMM数据管理能力成熟度二级认证
10月30日,中国电子信息行业联合会公示了新一批DCMM贯标企业,景联文科技成功通过DCMM数据管理能力成熟度二级认证(乙方认证)。 DCMM是《数据管理能力成熟度评估模型》的简称,是我国在数据管理领域首个正式发布的国家标准…...
从壹开始解读Yolov11【源码研读系列】——Data.dataset.py:模型训练数据预处理/YOLO官方数据集类——YOLODataset
【前情回顾】在上一篇文章记录了YOLO源码data目录下的 base.py 文件,其中定义了一个可灵活修改的数据加载处理基类——Class BaseDataset 灵活基类博文地址:https://blog.csdn.net/qq_58718853/article/details/143249295 【实验代码】所有实验代码上传至…...
C语言初阶必会的练习题(3)之位操作符(^ 、、>>等)的应用
C语言初阶必会的练习题(3) 放在最前面的1、不允许创建临时变量,交换两个整数的内容1.1、分析:见代码注释(a)方法 1(b)方法 2 1.2、结果展示方法 1 的 结果:方法 2 的 结果…...
MongoDB面试专题33道解析
大家好,我是 V 哥。今天给大家分享 MongoDB的道 V 哥原创的面试题,收藏起来,一定会对你有帮助。 V 哥推荐:2024 最适合入门的 JAVA 课程 1. 你说的 NoSQL 数据库是什么意思?NoSQL 与 RDBMS 直接有什么区别?…...
Laravel 安全实践:如何防止 XSS 攻击
在当今的网络环境中,应用程序的安全性越来越受到开发者和企业的重视。跨站脚本攻击(XSS)是常见的网络安全威胁之一,它通过在目标网站上注入恶意脚本,窃取用户信息或执行恶意操作。作为流行的 PHP 框架,Lara…...
《Java Web 开发》
一、引言 在当今数字化时代,Web 应用程序已经成为人们生活和工作中不可或缺的一部分。Java Web 开发作为一种广泛应用的技术,以其强大的功能、稳定性和可扩展性,在企业级应用开发中占据着重要地位。本文将深入探讨 Java Web 开发的各个方面&a…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
