umi: valtio的使用

最新推荐文章于 2025-06-04 09:11:28 发布

原创最新推荐文章于 2025-06-04 09:11:28 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

React 专栏收录该内容

34 篇文章

订阅专栏

一、基本用法

 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>
        </>
    )
}