react中zuStand状态管理工具使用

一、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

3.说明

本应该效果和上次的一模一样才对，但是我这里出现了报错，在组合片段store实例的位置提示已经弃用，导致报错了。官网没有说明该问题，写法还是这样的。

整体的思路就是将两个实例再次放在create方法中重新返回实例，相当于把两个实例的状态变量和方法通过展开运算符放在一个对象中再重新创建一个store实例