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

petty 状态管理库文档

news 2025/7/22 19:39:12

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