1.安装

npm install zustand # or yarn add zustand

2.项目结构

3.上代码

useStore.js

import { create } from 'zustand'

// 创建一个store
export const useStore = create((set, get) => ({
  name: 'zrs',
  age: 22,
  img: '',
  product: {
    productName: '笔记本',
    price: 2000
  },
  reset: () => set(() => ({}), true), // 清空整个state，包括action
  setName: (name) => set(() => ({ name })), // 传入值设置给state
  setAge: () => set(() => ({ age: 99 })),
  // 异步
  fetch: () => {
    fetch('https://api.uomg.com/api/rand.img1?sort=美女&format=json')
      .then((res) => res.json())
      .then((res) => {
        console.log('res', res)
        set(() => ({ img: res.imgurl }))
      })
  },
  changeProductName: (productName) => (set({ product: { productName, price: get().product.price } }))

}))

app.jsx

import { Button, Divider } from 'antd'
import { useEffect } from 'react'
import { useStore } from './store/userStore'
import Child1 from './components/child1'
import Child2 from './components/child2'

export default function App() {
  // 使用
  const userName = useStore((state) => state.name)
  const userAge = useStore((state) => state.age)
  const setName = useStore((state) => state.setName)
  const setAge = useStore((state) => state.setAge)
  const fetch = useStore((state) => state.fetch)

  useEffect(() => {
    // fetch()
    // return () => {
    //   second
    // }
  }, [])

  return (
    <>
      {userName}----{userAge}
      <hr />
      <Button type="primary" onClick={setAge}>
        set age
      </Button>
      <Button
        type="primary"
        onClick={() => {
          setName('新的名字') // 在这里传入的参数，然后设置给state
        }}
      >
        set name
      </Button>
      <Button type="primary" onClick={fetch}>
        fetch
      </Button>
      <hr />
      <Child1 />
      <Divider>商品</Divider>
      <Child2 />
    </>
  )
}

child1.jsx

import { useStore as store } from '../store/userStore'
import { Button } from 'antd'
export default function Child1() {
  // 使用
  // const name = store((state) => state.name)
  const reset = store((state) => state.reset)
  //  构建对象来一次拿到多个值
  const { name, age } = store((state) => ({ name: state.name, age: state.age }))
  return (
    <div>
      <Button
        onClick={() => {
          reset()
        }}
      >
        reset
      </Button>
      <hr />
      {name}----------------{age}
    </div>
  )
}

child2.jsx

import { useStore } from '../store/userStore'
import { Button } from 'antd'
export default function Child2() {
  const { product } = useStore((state) => ({ product: state.product }))
  const changeProductName = useStore((state) => state.changeProductName)
  return (
    <div>
      {product.productName}------{product.price}
      <Button
        onClick={() => {
          changeProductName('新的产品名字')
        }}
      >
        设置商品名字
      </Button>
    </div>
  )
}

4.中文官方网址

ZUSTAND 中文文档 | ZUSTAND (awesomedevin.github.io)