react 使用 valtio

安装

c 复制代码
npm i valtio

//好用的storage
npm i good-storage

使用

src目录下创建store文件夹,新增两个文件
index.js

js 复制代码
export * from './user'

user.js

js 复制代码
import { proxy,subscribe } from 'valtio'
import {useProxy} from 'valtio/utils'
import ss from 'good-storage'
const key = "USER_STORE"
const state = proxy(ss.get(key) || {
    token:'',
    info:{}
})

//持久化
subscribe(state, () =>{
    ss.set(key,state)
})

export function useUserStore(){
    return useProxy(state)
}

export const userActions = {
    setToken:async _token=>{
        state.token = _token
        await userActions.updateUserInfo()
        return state.info
    },
    setInfo:_info=>state.info = _info,
}
相关推荐
用户47949283569154 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
还好还好不是吗4 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup!!!
前端·性能优化
sumAll4 小时前
别再手动对齐矩形了!这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)
前端·人工智能·next.js
OpenTiny社区4 小时前
2025OpenTiny星光ShowTime!年度贡献者征集启动!
前端·vue.js·低代码
wangan0945 小时前
不带圆圈的二叉树
java·前端·javascript
狗哥哥5 小时前
从零到一:打造企业级 Vue 3 高性能表格组件的设计哲学与实践
前端·vue.js·架构
疯狂平头哥5 小时前
微信小程序真机预览-数字不等宽如何解决
前端
Drift_Dream5 小时前
前端趣味交互:如何精准判断鼠标从哪个方向进入元素?
前端
hqk5 小时前
鸿蒙ArkUI:状态管理、应用结构、路由全解析
android·前端·harmonyos
米思特儿林5 小时前
NuxtImage 配置上传目录配置
前端