import resso from 'resso';
import {  Button } from "@arco-design/web-react"

const store = resso({ count: 0, text: 'hello' });

function App() {
  const { count } = store; 
  return (
    <>
       <h1> {count}</h1>
       <Button onClick={()=>{ store.count+=1; }}>+</Button>
       <Button onClick={()=>{ store.count-=1; }}>-</Button>
    </>
  )
}

import resso from 'resso';

export const addStore = resso({
    count: 0,
    addCount: () => {
        addStore.count += 1;
    }
});

// B.tsx
import { Button } from '@arco-design/web-react'
import { addStore } from './store'

export function CompB(){
    let { count, addCount } = addStore;
    return <div>
        <h1>B组件: </h1>
        <h1>{count}</h1>
        <Button onClick={()=>{  addCount() }} >+</Button>
    </div>
}

import {  addStore } from './store'

export function CompA(){
    let { count } = addStore;
    return <div>
        <h1>A组件: </h1>
        <h1>{count}</h1>
    </div>
}

import resso from 'resso';

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => {
    const { count } = store; // 方法中用到的数据 → 须在顶层先解构
    store.count = count + 1; // 更改count
  },
});

// 更新单个
store.count = 60; // 直接赋值
store('count', (prev) => prev + 1); // 或 更新函数

// 更新多个
store({ count: 60, text: 'world' }); // 直接赋值

// 更新函数
store((prev) => ({
  count: prev.count + 1,
  text: prev.text === 'hello' ? 'world' : 'hello',
}));

// UI 中用到的数据，须在顶层先解构，因为其实是调用 `useState`
function App() {
  const { count } = store; // 须在最顶层，否则将有 React 报错 (Hooks 规则)
}