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
相关推荐
IT_陈寒4 分钟前
Redis性能翻倍的5个冷门优化技巧,90%的开发者都不知道第3个!
前端·人工智能·后端
野老杂谈23 分钟前
如何快速学习智能合约开发语言 Solidity
开发语言·学习·智能合约·solidity·以太坊·区块链开发
华仔啊30 分钟前
无需UI库!50行CSS打造丝滑弹性动效导航栏,拿来即用
前端·css
Han.miracle33 分钟前
Java线程的学习—多线程(一)
java·开发语言·学习
忧郁奔向冷的天39 分钟前
视觉SLAM十四讲2nd—学习笔记(二)20250817
笔记·学习
光影34151 小时前
专利撰写与申请核心要点简报
前端·数据库·php
ze_juejin1 小时前
Angular 中设置宿主元素(Host)样式的方法
前端
用户90443816324601 小时前
《零代码基础也能 AI 创作?GPT+DALL・E 实战教程,10 分钟上手》
前端·github
WillaWang1 小时前
aria | "Accessible Rich Internet Applications"
前端
reoreo1 小时前
如何使用 i18next 实现多种语言的国际化(从新建 vite ts 项目开始)
前端·javascript