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
相关推荐
slim~7 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼12 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己24 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
乖女子@@@37 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
励志不掉头发的内向程序员2 小时前
C++进阶——继承 (1)
开发语言·c++·学习
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
悠哉悠哉愿意2 小时前
【数学建模学习笔记】机器学习分类:随机森林分类
学习·机器学习·数学建模
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js