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
相关推荐
苏州向日葵1 分钟前
C#学习知识点记录
开发语言·学习·c#
编码七号7 分钟前
【axios取消请求】如何在token过期后取消未响应的请求
java·前端·javascript
张开心_kx8 分钟前
面试官又问我是否了解React的单向数据流
前端·javascript·react.js
落笔画忧愁e8 分钟前
数据通信学习笔记之OSPF的区域
笔记·学习·智能路由器
残轩11 分钟前
Win10 家庭版 Docker 环境搭建详解(基于 WSL2)
前端·后端·docker
palpitation9712 分钟前
Flutter分解布局选择辅助方法还是Widget?
前端
工呈士13 分钟前
HTML响应式网页设计与跨平台适配
前端·html
作曲家种太阳13 分钟前
第六章节 响应式的 computed 实现【手摸手带你实现一个vue3】
前端
Dovis(誓平步青云)15 分钟前
Cephalon端脑云:神经形态计算+边缘AI·重定义云端算力
图像处理·人工智能·学习·云原生·ai作画·边缘计算·机器翻译
腊月廿二15 分钟前
跨项目频繁切换node版本号(nvm-windows)
前端