基本使用
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)
}))