Zustand
介绍
特点
1. 安装
shell
npm install zustand
2. Store 初始化
创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。
jsx
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 获取您的目标状态, 组件将在状态更改的时候重新渲染
jsx
function a(){ const count = useBearStore((state)=>state.count) return <> <h1>{count}</h1> </> }
4. 同步修改
jsx
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. 异步修改
jsx
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里面的各个状态 互不相关, 功能独立, 且模块代码比较大
步骤:
- 抽离
- 总和
jsx
// 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) } }) // 下面组件正常调用
