react 中状态管理器 zustand 的使用

zustand是什么？

zustand 是一个状态管理器，能够实现组件间的数据状态共享以及动态更新。

使用

1. 使用 zustand 需要先引入 zustand 文件，官网给了一个引入方式

 npm i zustand

2. 单独设置一个文件作为状态管理的文件，这样可以使代码不至于很混乱

//store.ts
import { create } from "zustand";
//从 zustand 中引入 create 用以创建状态管理器
export const useStore = create((set, get) => ({
//这是数据
  count: 1,
//这是更新数据的方法
  inc: () => set((state: any) => ({ count: state.count + 1 }))
}));

3. 在需要这个数据的组件中引入这个数据

//playground.tsx
import { useStore } from './store'
//引入 store 中的状态管理器
export default function Playground() {
  const { count } = useStore((state) => ({count: state.count}))
//这里用解构获取到状态管理器里面的 count 值，并赋值给 count
  return(
    <div>{count}</div>
//然后就可以在需要这个数据的元素中使用这个数据了
  )
}

更改 store 中的数据,我们在另一个组件中改变count，Playground组件中 count 也会改变

//Button.tsx
import { useStore } from './store'
export default function Button() {
  const { inc } = useStore((state) =>  state.inc)
//利用解构将状态管理器中的 inc 方法引入进来，然后在点击的时候调用，每次点击就会使 count + 1
  return(
    <button onClick={ inc } > count+1 </button>
  )
}