@vtx/bi-store
Advanced tools
+1
-1
| { | ||
| "name": "@vtx/bi-store", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "A react library developed with dumi", | ||
@@ -5,0 +5,0 @@ "module": "dist/index.js", |
+57
-2
@@ -10,7 +10,62 @@ # @vtx/bi-store | ||
| TODO | ||
| ### 安装 | ||
| `npm i @vtx/bi-store --save` | ||
| or | ||
| `yarn add @vtx/bi-store` | ||
| or | ||
| `pnpm i @vtx/bi-store --save` | ||
| ### 使用 | ||
| ```jsx | ||
| import {StoreProvider, useGlobalStore} from '@vtx/bi-store'; | ||
| const Component = () => { | ||
| const [globalStore, setGlobalStore] = useGlobalStore(); | ||
| return ( | ||
| <div onClick={() => setGlobalStore({a: 1})}> | ||
| a: {globalStore?.a} | ||
| </div> | ||
| ) | ||
| } | ||
| const Component2 = () => { | ||
| const [globalStore, setGlobalStore] = useGlobalStore(); | ||
| return ( | ||
| <div onClick={() => setGlobalStore({b: 1})}> | ||
| b: {globalStore?.b} | ||
| </div> | ||
| ) | ||
| } | ||
| const Component3 = () => { | ||
| const [_, setGlobalStore] = useGlobalStore(); | ||
| return ( | ||
| <button onClick={() => setGlobalStore({a: 2, b: 3})}> | ||
| 赋值 | ||
| </button> | ||
| ) | ||
| } | ||
| export default () => { | ||
| return ( | ||
| <> | ||
| <StoreProvider initGlobalStore={{a: 99, b: 99}}> | ||
| <Component /> | ||
| <Component2 /> | ||
| <Component3 /> | ||
| </StoreProvider> | ||
| {/*失效*/} | ||
| <Component2 /> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
| ## Options | ||
| TODO | ||
| | api | description | | ||
| |-----------------|---------------------------------------------------------------| | ||
| | Provider | 基础的Provider容器组件,用于提供全局状态管理功能 | | ||
| | StoreProvider | Provider容器的具体实现,用来包装应用组件并初始化全局状态,接收`initGlobalStore`属性设置初始状态 | | ||
| | useStoreContent | 获取全局数据源内容的hook,可用于读取当前完整的store状态 | | ||
| | useGlobalStore | 获取和更新全局数据源的主要hook,返回一个数组,第一个元素是当前全局状态,第二个元素是用于更新全局状态的setter函数 | | ||
@@ -17,0 +72,0 @@ ## Development |
10345
20.36%99
125%