umi: valtio的使用

一、基本用法

 import { proxy, useSnapshot } from '@umijs/max';// 1、定义数据
const state = proxy({ count: 33 });export default () => {// 2、使用数据const snap = useSnapshot(state);function increaseCount() {state.count += 1;}return (<><h1>{snap.count}</h1><button onClick={increaseCount}>increase </button></>)
}

二、类似于vue计算属性的用法

import { proxy, useSnapshot, proxyWithComputed } from '@umijs/max';// 1、定义数据
const state = proxyWithComputed({count: 0,
}, {double: snap => snap.count * 3,
});export default () => {// 2、使用数据const snap = useSnapshot(state);function increaseCount() {state.count += 1;}return (<><h1>{snap.double}</h1><button onClick={increaseCount}>increase </button></>)
}