说明
zustand是一个小型、快速且可扩展的精简状态管理解决方案。
示例
安装zustand
运行npm i zustand
安装:
安装完成后,package.json文件中自动更新了依赖:
代码中使用
import { create } from "zustand"
// 创建store
// 函数参数必须返回一个对象,对象内部编写状态和方法
// set是用来修改状态的专有方法,必须调用来方法来修改数据
// set的语法1:参数是函数,需要用到老数据的场景使用,例如set((state) => ({ count: state.count + 1 }))
// set的语法2:参数直接是一个对象,不需要用到老的数据场景使用,例如set({ count: 100 })
const useStore = create((set) => {
return {
// 定义状态数据
count: 10,
// 定义修改状态数据的方法
inc: () => {
set((state) => ({ count: state.count + 1 }))
}
}
})
function App() {
// 绑定store到组件
// useStore()返回的是一个对象,对象中有数据和修改数据的方法
const { count, inc } = useStore()
return (
<>
<button onClick={inc}>{count}</button>
</>
)
}
export default App
初始展示:
每点击一次按钮,就加1: