umi: valtio的使用

最新推荐文章于 2025-06-12 11:31:33 发布

amadeus_liu2

最新推荐文章于 2025-06-12 11:31:33 发布

阅读量221

点赞数 3

分类专栏： React 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/amadeus_liu2/article/details/145798414

版权

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