React 学习——zustand使用

1、安装zustand;命令: npm install zustand

注意:

  1. 函数参数必须返回(return)一个对象,对象内部编写状态数据和方法
  2. set 是用来修改数据的专门方法必须调用他来修改数据;两种语法(在代码中有注释)
javascript 复制代码
import { create } from 'zustand'

// 创建store
const useStore = create(set=>{
  return {
    count: 0,
    add:()=>{ set(state => ({ count: state.count + 1 })) },
    // sub:()=>{ set(state => ({count: state.count - 1})) }, //第一种语法,修改老数据的场景;理解为在上一个值的情况下计算
    sub:()=>{set({count:100})}//第二种 参数直接是一个对象;理解为直接赋值
  }
})
// 绑定store到组件 useStore解构拿到数据和修改数据的方法
const App = () => {
  const { count,add,sub } = useStore();
  return (
    <div className="home">
      <button onClick={add}>+</button>
      <span>{count}</span>
      <button onClick={sub}>-</button>
    </div>
  )
}
export default App
相关推荐
笔尖的记忆几秒前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin8889 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
lichenyang45317 分钟前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼17 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
用户8417948145629 分钟前
vxe-table 实现列头授权自定义插槽模板,自定义输入框
前端
im_AMBER33 分钟前
Web 开发 24
前端·笔记·git·学习
小小前端_我自坚强36 分钟前
前端算法相关详解
前端·算法
小小前端_我自坚强42 分钟前
UniApp 微信小程序流水线发布全流程
前端·架构
小小前端_我自坚强1 小时前
vue提高技术 高级语法相关
前端·vue.js·前端框架
小小前端_我自坚强1 小时前
2025年前端最新技术总结
前端·架构