From 1156b8c788ba5b3d62dd7c371f187d576105a0e4 Mon Sep 17 00:00:00 2001 From: coderhxl Date: Fri, 24 Feb 2023 11:35:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 127 ++++++++++++++++++++++++------------------- package.json | 2 +- publish/README.md | 127 ++++++++++++++++++++++++------------------- publish/package.json | 2 +- 4 files changed, 142 insertions(+), 116 deletions(-) diff --git a/README.md b/README.md index 10d42dd..47f24b5 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,93 @@ # xl-store -状态管理库 +xl-store 是一个可 深浅 观察的状态管理库。 + +## 特征 + +- 可深浅观察 +- 支持在微信小程序使用 +- 用法简单 ## 安装 -使用 NPM: +以 NPM 为例: ```shell npm install xl-store ``` -使用 Yarn: +## 示例 -```shell -yarn add xl-store -``` +```JavaScript +// 1.导入 xlStore +import xlStore from 'xl-store' +// const xlStore = require('xlStore') + +// 2.定义一个仓库 +const myStore = xlStore({ + state: { + // 存放数据 + info: {} + }, + actions: { + // 存放改变state的函数 + changeInfoAction(id, name, age) { + // this指向state + this.info = { id, name, age } + } + } +}, { + // 深观察, 当 state 的 info 里面的某个属性的值发生改变也会执行收集的依赖 + isDeepWatch: true +}) -使用 PNPM: +function infoCallback1(key, value) { + console.log('watch-info1', key, value) +} -```shell -pnpm add xl-store +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) ``` ## 核心概念 -### Arguments +### xlStore + +创建一个仓库。 + +#### 参数 -#### State +##### Content -存放需要 管理/共享 的数据。 +包含两个参数： -#### Actions +- State: Object -存放改变 State 数据的函数, 可通过 this 拿到 State 中存放的数据。 + 存放需要 管理/共享 的数据。 -#### Options +- Actions: Object + + 存放改变 State 数据的函数, 可通过 this 拿到 State 中存放的数据。 + +##### Options + +包含一个参数： - isDeepWatch: Boolean @@ -42,6 +95,8 @@ pnpm add xl-store ### API +仓库的 API 。 + #### watch - Key: String | String[] @@ -65,45 +120,3 @@ pnpm add xl-store - Callback: Function 删除对 State 中某个数据监听 。 - -## 使用 - -```JavaScript -// 1.导入 xlStore -import xlStore from 'xlStore' -// const xlStore = require('xlStore') - -// 2.使用 -const myStore = xlStore({ - state: { - // 存放数据 - info: {} - }, - actions: { - // 存放改变state的函数 - changeInfoAction(id, name, age) { - // this指向state - this.info = { id, name, age } - } - } -}, { - // 当 state 内部值发生改变也执行收集的依赖 - isDeepWatch: true -}) - -function infoCallback(key, value) { - console.log('watch-info', key, value) -} - -// 添加观察(依赖), 当 info 数据发生改变会执行 infoCallback 回调函数 -myStore.watch('info', infoCallback) -// 添加观察(依赖), 会先执行一次 infoCallback , 数据发生改变会执行 infoCallback 回调函数 -myStore.watchEffect('info', infoCallback) - -myStore.changeInfoAction(1, 'hxl', 18) - -// 删掉观察(依赖), 下次 info 数据发生改变不会执行 infoCallback 回调函数 -myStore.deleteWatch('info', infoCallback) - -myStore.changeInfoAction(2, 'codehxl', 18) -``` diff --git a/package.json b/package.json index a00389d..9868bed 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": "true", "name": "xl-store", - "version": "0.1.15", + "version": "0.1.16", "author": "coderhxl", "description": "状态管理库", "license": "MIT", diff --git a/publish/README.md b/publish/README.md index 10d42dd..47f24b5 100644 --- a/publish/README.md +++ b/publish/README.md @@ -1,40 +1,93 @@ # xl-store -状态管理库 +xl-store 是一个可 深浅 观察的状态管理库。 + +## 特征 + +- 可深浅观察 +- 支持在微信小程序使用 +- 用法简单 ## 安装 -使用 NPM: +以 NPM 为例: ```shell npm install xl-store ``` -使用 Yarn: +## 示例 -```shell -yarn add xl-store -``` +```JavaScript +// 1.导入 xlStore +import xlStore from 'xl-store' +// const xlStore = require('xlStore') + +// 2.定义一个仓库 +const myStore = xlStore({ + state: { + // 存放数据 + info: {} + }, + actions: { + // 存放改变state的函数 + changeInfoAction(id, name, age) { + // this指向state + this.info = { id, name, age } + } + } +}, { + // 深观察, 当 state 的 info 里面的某个属性的值发生改变也会执行收集的依赖 + isDeepWatch: true +}) -使用 PNPM: +function infoCallback1(key, value) { + console.log('watch-info1', key, value) +} -```shell -pnpm add xl-store +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) ``` ## 核心概念 -### Arguments +### xlStore + +创建一个仓库。 + +#### 参数 -#### State +##### Content -存放需要 管理/共享 的数据。 +包含两个参数： -#### Actions +- State: Object -存放改变 State 数据的函数, 可通过 this 拿到 State 中存放的数据。 + 存放需要 管理/共享 的数据。 -#### Options +- Actions: Object + + 存放改变 State 数据的函数, 可通过 this 拿到 State 中存放的数据。 + +##### Options + +包含一个参数： - isDeepWatch: Boolean @@ -42,6 +95,8 @@ pnpm add xl-store ### API +仓库的 API 。 + #### watch - Key: String | String[] @@ -65,45 +120,3 @@ pnpm add xl-store - Callback: Function 删除对 State 中某个数据监听 。 - -## 使用 - -```JavaScript -// 1.导入 xlStore -import xlStore from 'xlStore' -// const xlStore = require('xlStore') - -// 2.使用 -const myStore = xlStore({ - state: { - // 存放数据 - info: {} - }, - actions: { - // 存放改变state的函数 - changeInfoAction(id, name, age) { - // this指向state - this.info = { id, name, age } - } - } -}, { - // 当 state 内部值发生改变也执行收集的依赖 - isDeepWatch: true -}) - -function infoCallback(key, value) { - console.log('watch-info', key, value) -} - -// 添加观察(依赖), 当 info 数据发生改变会执行 infoCallback 回调函数 -myStore.watch('info', infoCallback) -// 添加观察(依赖), 会先执行一次 infoCallback , 数据发生改变会执行 infoCallback 回调函数 -myStore.watchEffect('info', infoCallback) - -myStore.changeInfoAction(1, 'hxl', 18) - -// 删掉观察(依赖), 下次 info 数据发生改变不会执行 infoCallback 回调函数 -myStore.deleteWatch('info', infoCallback) - -myStore.changeInfoAction(2, 'codehxl', 18) -``` diff --git a/publish/package.json b/publish/package.json index 90c12cf..9a134c4 100644 --- a/publish/package.json +++ b/publish/package.json @@ -1,6 +1,6 @@ { "name": "xl-store", - "version": "0.1.15", + "version": "0.1.16", "author": "coderhxl", "description": "状态管理库", "license": "MIT",