【zustand】快速使用

本文主要是介绍【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)
}))

这篇关于【zustand】快速使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---