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>