Zustand极简的状态管理工具

小夏同学呀

于 2024-03-19 17:48:51 发布

阅读量903

点赞数 7

分类专栏： react 文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/web5219/article/details/136849439

版权

本文介绍了Zustand，一个小型、易用的状态管理库，使用hooksAPI，支持异步操作和切片模式。文章还演示了如何安装、使用以及配置Zustand的DevTools进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

一个小型、快速且可扩展的 Bearbones 状态管理解决方案。 Zustand 有一个基于 hooks 的舒适 API。它不是样板文件或固执己见，但有足够的惯例来明确和类似通量。 zustand官网

zustand使用方法及调试工具的安装使用

安装包

npm install zustand

2.创建store仓库

import {
    create } from 'zustand'

const useStore = create((set) => {
   
  return {
   
    count: 0,
    //如果用到原数据，可以携程函数式写法，也可以使用对象式写法世界进行赋值
    inc: () => {
   
      set(state => ({
    count: state.count + 1 }))
    }，
     removeAllBears: () => set({
    count: 0 }),
  }
})

export default useStore

在组件内使用

import useStore from './store/useCounterStore.js'

function App() {
   
//直接解构出来用即可
  const {
    count, inc } = useStore()
  return <button onClick={
   inc}>{
   count}

最低0.47元/天解锁文章