【zustand】快速使用

基本使用

const useStore = create((set) => {
    return {
        // 状态数据
        count: 0,
        // 修改状态数据的方法
        inc: () => {
            set((state) => ({count: state.count + 1})) // 最后这个 ()  的意思是返回了一个对象，基于原数据进行计算得到
            // set({count: 100})  // 不需要使用到 老数据
        }
    }
})

function App() {
    const {count, inc} = useStore()
    return (
        <>
            <button onClick={inc}>{count}</button>
        </>
    )
}

异步

const useStore = create((set) => {
    return {
        // 状态数据
        channelList: [],
        // 异步方法
        fetchChannelList: async () => {
           const res = await fetch(URL)
            const data = await res.json()
            set({
                channelList: data.data.channels
            })
        }
    }
})

切片

const createCounterStore = (set) => {
    return {
        count: 0,
        inc: () => set((state) => ({count: state.count + 1}))
    }
}
const createChannelStore = (set) => {
    return {
        // 状态数据
        channelList: [],
        // 异步方法
        fetchChannelList: async () => {
            const res = await fetch(URL)
            const data = await res.json()
            set({
                channelList: data.data.channels
            })
        }
    } 
}
const useStore = create((...a) => ({
    ...createCounterStore(...a),
    ...createChannelStore(...a)
}))