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,
}
相关推荐
爱码小白17 分钟前
importlib模块
开发语言·前端·python
猫猫不是喵喵.43 分钟前
Vue2 的 Vuex 状态管理与 Vue3 的 Pinia 状态管理
前端·javascript·vue.js
greenbbLV1 小时前
中小公司积分商城选型:SaaS与私有化方案对比解析
大数据·前端·小程序
看昭奚恤哭1 小时前
Flutter 布局核心思想
开发语言·javascript·flutter
朝阳5812 小时前
Cesium `Camera.flyTo`:“飞过去“
javascript
NutShell Wang2 小时前
Vite 8.1 深度拆解:Rolldown 统一打包器如何终结前端构建的「双引擎时代」
前端·rust·开源·vite·开发者工具·vibe coding
朱容zr3331332 小时前
请解释“回表”的概念。
java·前端·数据库
leslie1183 小时前
webpack笔记
前端·webpack
宁风NF3 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6
勾勾圈圈蛋蛋3 小时前
DOM、BOM、DOM操作详解 + 结合Vue响应式关联梳理
前端