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,
}
相关推荐
一个懒人懒人3 小时前
Promise async/await与fetch的概念
前端·javascript·html
Mintopia3 小时前
Web 安全与反编译源码下的权限设计:构筑前后端一致的防护体系
前端·安全
输出输入3 小时前
前端核心技术
开发语言·前端
Mintopia3 小时前
Web 安全与反编译源码下的权限设计:构建前后端一体的信任防线
前端·安全·编译原理
林深现海4 小时前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多4 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界4 小时前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
早點睡3904 小时前
高级进阶 ReactNative for Harmony 项目鸿蒙化三方库集成实战:react-native-drag-sort
react native·react.js·harmonyos
文艺理科生4 小时前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构
千寻girling4 小时前
主管:”人家 Node 框架都用 Nest.js 了 , 你怎么还在用 Express ?“
前端·后端·面试