xl-store
xl-store 是一个可 深浅 观察的状态管理库。
特征
安装
以 NPM 为例:
npm install xl-store
示例
import xlStore from 'xl-store'
const myStore = xlStore({
state: {
info: {}
},
actions: {
changeInfoAction(id, name, age) {
this.info = { id, name, age }
}
}
}, {
isDeepWatch: true
})
function infoCallback1(key, value) {
console.log('watch-info1', key, value)
}
function infoCallback2(key, value) {
console.log('watch-info2', key, value)
}
myStore.watch('info', infoCallback1)
myStore.watchEffect('info', infoCallback2)
myStore.changeInfoAction(1, 'hxl', 18)
myStore.deleteWatch('info', infoCallback1)
myStore.changeInfoAction(2, 'codehxl', 19)
核心概念
xlStore
创建一个仓库。
参数
Content
接收两个参数:
Options
接收一个参数:
API
仓库的 API 。
watch
函数接收两个参数:
-
Key: String | String[]
-
Callback: Function
对 State 中某个数据开启监听,当数据发生改变时会执行 Callback ,并将 Key 和 NewValue 当作参数传给 Callback 。
watchEffect
函数接收两个参数:
-
Key: String | String[]
-
Callback: Function
与 Watch API 一样,不同的是,其会先立刻执行一次 Callback 。
deleteWatch
函数接收两个参数:
-
Key: String | String[]
-
Callback: Function
删除对 State 中某个数据监听 。