电商网站的成本,python 营销型网站建设,查关键词的排名工具,咸阳学校网站建设价格自研 Petty 状态管理库产生背景
petty 是一款适用于 vue2.5以下版本#xff08;目前已兼容vue2.5x 以上版本#xff09;的状态管理库#xff0c;能够在 vue 2这种配置项的代码中#xff0c;去实现类似于 vue3 里的 pinia、React 里的hook的调用形式#xff0c;用函数式的…自研 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 age12;function changeAddress() {address.value right here;}return {name: jeff,age,address,changeAddress,};
});export default myStore;// 代码里使用
import myStore from ./stroe/myStore;
const [store, dispatch] myStore();templatediv idappdiv{{ store.name }}/divdiv{{ store.address.value }}/div/div
/templateexport 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();templatediv idappdiv{{ store.name }}/divdiv{{ store.address.value }}/div/div
/templateexport default defineComponent({name: App,computed: {store: () store,},mounted() {setTimeout(() {store.namexxxstore.address.valuexxx}, 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;// 代码中
templatediv classpie-contdiv classpie-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;// 代码里
templatediv classpie-contdiv classpie男女比例饼图:/divdiv classpie-date日期{{ store.currentIndex.value }}:{{ store.date.value }}/divdiv classpie-date2详细日期{{ computedDate }}{{ store.getOtherStoreName() }}/div/div
/templatescript
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 pettyexport 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
