react中zuStand状态管理工具使用

news2024/11/28 2:28:16

一、zuStand的基本使用

1.安装工具

npm install zustand

2.新建文件

在src下新建store文件夹，在store文件夹下新建zuStand.js文件

3.配置zuStand.js

// 1.引入创建方法
import { create } from "zustand";

// 2.创建store
const useStore = create((setState)=>{
    return {
        // 状态数据
        count:0,
        // 修改状态数据的方法
        incrementCount:()=>{
            setState((state)=>({count:state.count+1}))
        },
        updateCount:()=>{
            setState({count:100})
        }
    }
})
// 3.暴露store实例
export default useStore

4.组件中引入使用

// 1.引入store实例
import  useStore  from "@/store/zustand"

function Zustand(){
    // 2.解构出需要的状态变量和方法
    const {count,incrementCount,updateCount} = useStore()
    return (
        <div>
            我是Zustand页面{count}
            <button onClick={incrementCount}>+</button>
            <button onClick={updateCount}>更新</button>
        </div>
    )
}

export default Zustand

5.最终效果

二、zuStand的异步请求的使用

1.zustand.js文件中

// 1.引入创建方法
import { create } from "zustand";

// 2.创建store
const useStore = create((setState) => {
    return {
        // 状态数据
        count: 0,
        dataList: [],
        // 修改状态数据的方法
        incrementCount: () => {
            setState((state) => ({ count: state.count + 1 }))
        },
        updateCount: () => {
            setState({ count: 100 })
        },
        // 异步请求
        getDataList: async () => {
            const response = await fetch('http://localhost:8888/kanno'); // 通过fetch来请求数据
            const data = await response.json();
            setState({dataList:data})
        }
    }
})
// 3.暴露store实例
export default useStore

说明：其实就是与同步方法一样的写法，就只不过是在同步方法中添加了异步请求

2.组件中使用

// 1.引入store实例
import  useStore  from "@/store/modules/zustand"
import { useEffect } from "react"

function Zustand(){
    // 2.解构出需要的状态变量和方法
    const {count,incrementCount,updateCount,dataList,getDataList} = useStore()
    useEffect(()=>{
        getDataList()
    },[])
    return (
        <div>
            我是Zustand页面{count}
            <button onClick={incrementCount}>+</button>
            <button onClick={updateCount}>更新</button>
            {dataList.map((item,index)=><div key={index}>{item.name}</div>)}
        </div>
    )
}

export default Zustand

3.最终效果

三、片段化状管理状态管理

1.zuStand.js文件中

// 1.引入创建方法
import { create } from "zustand";

// 2.创建多个store实例（片段化）
const createCountStore = create((setState) => {
    return {
        // 状态数据
        count: 0,
        // 修改状态数据的方法
        incrementCount: () => {
            setState((state) => ({ count: state.count + 1 }))
        },
        updateCount: () => {
            setState({ count: 100 })
        }
    }
})

const createDataListStore = create((setState)=>{
    return {
         // 状态数据
         dataList: [],
         // 修改状态数据的方法 异步请求
         getDataList: async () => {
             const response = await fetch('http://localhost:8888/kanno'); // 通过fetch来请求数据
             const data = await response.json();
             setState({dataList:data})
         }
    }
})

// 3.组合片段store实例
const useStore = create((...a)=>{
    return {
        ...createCountStore(...a),
        ...createDataListStore(...a)
    }
})


// 4.暴露组合后的store实例
export default useStore

2.组件使用中

无需变化

// 1.引入store实例
import  useStore  from "@/store/modules/zustand"
import { useEffect } from "react"

function Zustand(){
    // 2.解构出需要的状态变量和方法
    const {count,incrementCount,updateCount,dataList,getDataList} = useStore()
    useEffect(()=>{
        getDataList()
    },[])
    return (
        <div>
            我是Zustand页面{count}
            <button onClick={incrementCount}>+</button>
            <button onClick={updateCount}>更新</button>
            {dataList.map((item,index)=><div key={index}>{item.name}</div>)}
        </div>
    )
}

export default Zustand