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,
}
相关推荐
爱学习的狮王5 分钟前
ubuntu18.04安装nvm管理本机node和npm
前端·npm·node.js·nvm
东锋1.39 分钟前
使用 F12 查看 Network 及数据格式
前端
zhanggongzichu12 分钟前
npm常用命令
前端·npm·node.js
anyup_前端梦工厂18 分钟前
从浏览器层面看前端性能:了解 Chrome 组件、多进程与多线程
前端·chrome
zzlyx9922 分钟前
.NET 9 微软官方推荐使用 Scalar 替代传统的 Swagger
javascript·microsoft·.net
chengpei14727 分钟前
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确
java·前端·chrome·spring boot·json
Bunury29 分钟前
组件封装-List
javascript·数据结构·list
我命由我1234535 分钟前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js
前端·javascript·前端框架·npm·node.js·html5·js
每一天,每一步1 小时前
react antd点击table单元格文字下载指定的excel路径
前端·react.js·excel
浪浪山小白兔1 小时前
HTML5 语义元素详解
前端·html·html5