@vtx/bi-store

A react library developed with dumi

Usage

安装

npm i @vtx/bi-store --save
or
yarn add @vtx/bi-store
or
pnpm i @vtx/bi-store --save

使用

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

| api | description | |-----------------|---------------------------------------------------------------| | Provider | 基础的Provider容器组件，用于提供全局状态管理功能 | | StoreProvider | Provider容器的具体实现，用来包装应用组件并初始化全局状态，接收initGlobalStore属性设置初始状态 | | useStoreContent | 获取全局数据源内容的hook，可用于读取当前完整的store状态 | | useGlobalStore | 获取和更新全局数据源的主要hook，返回一个数组，第一个元素是当前全局状态，第二个元素是用于更新全局状态的setter函数 |

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# check your project for potential problems
$ pnpm run doctor

LICENSE

MIT