当前位置：首页 > news >正文

react中zuStand状态管理工具使用

news 来源：原创 2024/9/20 3:47:45

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