Zustand的用法

npm install zustand  #或yarn添加zustand或PNPM添加zustand
 

创建store

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

绑定组件

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}
//或
 const {bears, increasePopulation} = useBearStore()

异步action

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,

  asyncIncreasePopulation: async () => {
    await console.log(111);//在这里异步操作
    return set((state) => {
      console.log(state);
      return { bears: state.bears + 1 }
    })
  }
}))
export default useBearStore

访问存储状态 (计算属性)

import { create } from 'zustand'

const useBearStore = create((set,get) => ({
  bears: 0,
  // 访问存储状态
  getState: () => {
    return get().bears * 10;
  }
}))
export default useBearStore

模块化拆分

模块化使用