当前位置： 首页 > news >正文

petty 状态管理库文档

news 2024/11/8 20:36:04

自研 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>

http://www.mrgr.cn/news/68590.html

相关文章：

  • HarmonyOS第一课——DevEco Studio的使用
  • 离散无记忆信道
  • Ethernet 系列（8）-- 基础学习::ARP
  • 【vue2.0入门】认识vue工程
  • scala set训练
  • 测试自动化如何和业务流程结合？
  • 【Linux】进程信号全攻略（一）
  • 【论文复现】基于深度学习的手势识别算法
  • 2024年了，还适合入行嵌入式吗？
  • jdk17启动项目报错
  • 安装指定版本的transfomers报错ERROR: Failed building wheel for tokenizers
  • 深究JS底层原理
  • np.clip函数
  • prompt资料收集
  • 《瀚文欣赏的唐诗集》
  • 【高等数学】微分学的应用
  • 挑选BPM软件秘籍，揭秘六大必备功能
  • Python练习12
  • ResNet18模型扑克牌图片预测
  • MySQL架构原理之存储引擎
  • 以梧桐数据库为例讲解如何计算用户连续登录比率
  • 头戴式耳机百元价位推荐？2024头戴式耳机性价比推荐
  • java中函数式接口
  • Pandas | 数据分析时将特定列转换为数字类型 float64 或 int64的方法
  • C++:( ͡• ͜ʖ ͡• )详解类型转换运算
  • 文件内的函数的定义和调用，函数内的函数定义和调用