?什么是zustand？

? ? ? zustand 是一個輕量級、快速且可擴展的 React 狀態管理庫，旨在提供一種簡單直接的方式來管理應用狀態，而無需其他解決方案通常伴隨的繁瑣代碼。根據官方 Zustand 文檔，Zustand 是“一個使用簡化 flux 原理的小型、快速且可擴展的精簡狀態管理解決方案”。它允許開發者創建包含狀態和操作的 store，這些 store 可以通過 React hooks 進行訪問和更新。

中文官網?

Zustand 中文網

安裝

npm install zustand

基礎使用

創建store

import { create } from 'zustand'const useStore = create((set) => ({  //set是用來修改數據的專門方法，必須調用它來修改數據//狀態數據  bears: 0,//修改方法increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), //加一removeAllBears: () => set({ bears: 0 }),//置0updateBears: (newBears) => set({ bears: newBears }),//接收傳遞的值并賦值
}))
export default useStore

綁定組件并使用

import useStore from '../../zustand'
const Month = () => {const bears = useStore((state) => state.bears)const { increasePopulation, removeAllBears, updateBears } = useStore()return (<div> {bears}<button onClick={increasePopulation}>加一</button><button onClick={removeAllBears}>置0</button><button onClick={()=>updateBears(3)}>傳值</button></div>)
};
export default Month;

異步使用

異步實現接口請求更改數據?

import axios from 'axios'
import { create } from 'zustand'const useStore = create((set) => ({listData:[],changeList:async()=>{let res =await axios.get('https://api.taolale.com/api/xjj/get?key=KadadfdgfdhhjGEK')set({listData:res.data.data})}}))
export default useStore

?組件調用

import useStore from '../../zustand'
const Month = () => {const list = useStore((state) => state.listData)const { changeList} = useStore()return (<div> {list}<button onClick={changeList}>獲取數據</button></div>)
};
export default Month;

切片模式（模塊化）

拆分模塊，在組合起來?

場景：當單個store比較大的時候，可以采用切片模式進行模塊拆分組合，類似于模塊化

模塊一? createBearSlice.js

const createBearSlice = (set) => ({bears: 0,addBear: () => set((state) => ({ bears: state.bears + 1 })),eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
})
export default createBearSlice

模塊二??createFishSlice.js

const createFishSlice = (set) => ({fishes: 0,addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
})
export default createFishSlice

組合模塊? index.js

import { create } from 'zustand'
import  createBearSlice from './createBearSlice'
import  createFishSlice from './createFishSlice'const useBoundStore = create((...a) => ({...createBearSlice(...a),...createFishSlice(...a),
}))
export {useBoundStore}

?組件使用? 直接解構使用

import { useBoundStore } from './store/index'
const Month = () => {const { bears,fishes,addBear} = useBoundStore()return (<div> {fishes}{bears}<button onClick={addBear}>加一</button></div>)
};
export default Month;