Skip to content

xl-store 是一个可自定义 深或浅 观察模式的状态管理库。

License

Notifications You must be signed in to change notification settings

coder-hxl/xl-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

40ae4c7 · Feb 24, 2023

History

56 Commits
Nov 27, 2022
Feb 24, 2023
Nov 30, 2022
Nov 29, 2022
Nov 30, 2022
Nov 30, 2022
Nov 30, 2022
Nov 24, 2022
Nov 24, 2022
Nov 28, 2022
Feb 24, 2023
Nov 30, 2022
Feb 24, 2023
Nov 29, 2022
Nov 30, 2022
Nov 27, 2022

Repository files navigation

xl-store

xl-store 是一个可 深浅 观察的状态管理库。

特征

  • 可深浅观察
  • 支持在微信小程序使用
  • 用法简单

安装

以 NPM 为例:

npm install xl-store

示例

// 1.导入模块 ES/CJS
import xlStore from 'xl-store'

// 2.定义一个仓库
const myStore = xlStore({
  state: {
    // 存放数据
    info: {}
  },
  actions: {
    // 存放改变state的函数
    changeInfoAction(id, name, age) {
      // this指向state
      this.info = { id, name, age }
    }
  }
}, {
  // 深观察, 当 state 的 info 里面的某个属性的值发生改变也会执行收集的依赖
  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)

// 添加观察(依赖), 会先执行一下 infoCallback2
myStore.watchEffect('info', infoCallback2)

// 修改 state 的 info , 改完后会执行 infoCallback1 和 infoCallback2 回调函数
myStore.changeInfoAction(1, 'hxl', 18)

// 删掉观察(依赖),删除 infoCallback1 回调函数
myStore.deleteWatch('info', infoCallback1)

// 修改 state 的 info , 改完后不会执行 infoCallback1 回调函数, 但会执行 infoCallback2 回调函数
myStore.changeInfoAction(2, 'codehxl', 19)

核心概念

xlStore

创建一个仓库。

参数

Content

接收两个参数:

  • State: Object

    存放需要 管理/共享 的数据。

  • Actions: Object

    存放改变 State 数据的函数, 可通过 this 拿到 State 中存放的数据。

Options

接收一个参数:

  • isDeepWatch: Boolean

    默认为 false ,当 State 中的内部值发生改变也执行收集的依赖(传给 watch 的回调函数)。

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 中某个数据监听 。

About

xl-store 是一个可自定义 深或浅 观察模式的状态管理库。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published