轻量级状态管理库 Zustand 的基本使用

心安事随

发布于 2024-07-29 17:11:50

1130

发布于 2024-07-29 17:11:50

文章被收录于专栏：前端大合集

Zustand

介绍

特点

1. 安装

 npm install zustand

2. Store 初始化

创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。

 import {create} from 'zustand'
 
 const useBearStore = create((set) =>({
     // 初始化数据状态
     count:0,
     // 修改数据状态的方法
     increaseCount:()=>set((state)=>({count:state.count + 1})),
     resetCount:()=>set({count : 0})
 }))

3. Store 绑定组件

可以在任何地方使用钩子, 不需要提供 Provider

基于selector 获取您的目标状态, 组件将在状态更改的时候重新渲染

 function a(){
     const count = useBearStore((state)=>state.count)
     return
     <>
         <h1>{count}</h1>
     </>
 }

4. 同步修改

 
 import { create } from 'zustand'
 import { Button } from 'antd'
 import './index.scss'
 
 // 1. 创建store
 const useStore = create((set) => {
     return {
         // 状态数据
         count: 0,
         // 修改状态数据的方法
         increase: () => {
             set((state) => ({ count: state.count + 1 }))
         },
     }
 })
 
 // 2. 绑定store 到组件
 
 function Zustand() {
 
     const { count, increase  } = useStore()
     return (
         <>
             <h1>{count}</h1>
             <Button className='btn' type='primary' onClick={() => { increase() }}> 增加</Button>
         </>
     )
 }
 
 export default Zustand

5. 异步修改

 
 import { create } from 'zustand'
 import { Button } from 'antd'
 import './index.scss'
 const url = 'http://geek.itheima.net/v1_0/channels'
 // 1. 创建store
 const useStore = create((set) => {
     return {
         // 异步状态数据的方法
         fetchChannel: async () => {
             const res = await fetch(url)
             const JsonData = await res.json()
             console.log(JsonData);
             // 调用set 方法 进行状态的赋值
             set({
                 channelsList: JsonData.data.channels
             })
         }
     }
 })
 
 // 2. 绑定store 到组件
 function Zustand() {
     const { fetchChannel, channelsList } = useStore()
     return (
         <>
             <Button className='btn' type='primary' onClick={fetchChannel}> 点我方式请求</Button>
             <br></br>
             <ul>
                 {channelsList.map((item) => <li>{item.name}</li>)}
             </ul>
         </>
     )
 }
 export default Zustand

6. 切片模式

适合场景: store里面的各个状态互不相关, 功能独立, 且模块代码比较大

步骤:

抽离
总和

 // 1. 抽离和count相关的内容 
 
 const createCountStore = (set) => {
     return {
         // 状态数据
         count: 0,  // 修改状态数据的方法
         increase: () => {
             set((state) => ({ count: state.count + 1 }))
         }
     }
 }
 
 // 2. 抽离和channelList 相关的内容
 const createChannelsList = (set) => {
     return {
         channelsList: [],
 
         // 异步状态数据的方法
         fetchChannel: async () => {
             const res = await fetch(url)
             const JsonData = await res.json()
             console.log(JsonData);
             // 调用set 方法 进行状态的赋值
             set({
                 channelsList: JsonData.data.channels
             })
         }
     }
 }
 
 // 合并
 const useStore = create((...a) => {
     return {
         ...createChannelsList(...a),
         ...createCountStore(...a)
     }
 })
 
 // 下面组件正常调用

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

count