zustand - npm

安装 npm i zustand

创建切片目录：

创建切片 channelStore.js

import { getChannelsAPI } from "@/apis/article";
const channelStore = (set) => {return {channelList: [],fetchChannelList: async () => {const res = await getChannelsAPI()set({channelList: res.data.data.channels})}}
}
export default channelStore

创建切片numStore.js

const numStore = (set) => {return {num: 0,incre: ()=>{set(state => ({num: state.num+1}))}}
}
export default numStore

创建主Store 如  useStoree 并组合切片

import { create } from "zustand";
import channelStore from "./module/channelStore";
import numStore from "./module/numStore";const useStoree = create((...args) =>{return {...channelStore(...args),...numStore(...args)}
})
export default useStoree

或者

import { create } from 'zustand';
import channelStore  from './module/channelStore';
import numStore  from './module/numStore';const useStoree = create(set => ({...channelStore(set),...numStore(set)
}))export default useStoree

在组件中使用useStoree 

import useStoree from "@/zustandStore";
import { useEffect } from "react";const ZustanInd = ()=>{// const num = useStoree((state) => state.num)// const fetchChannelList = useStoree((state) => state.fetchChannelList)// const channelList = useStoree((state) =>state.channelList)// const incre = useStoree((state) => state.incre)const {num,incre,fetchChannelList,channelList} = useStoree()useEffect(()=>{fetchChannelList()},[])console.log(channelList)return<><button onClick={incre}>{num}</button><ul>{channelList.map(item=><li key={item.id}>{item.name}</li>)}</ul></>
}
export default ZustanInd

使用 persist 中间件 持久化状态

npm install zustand/persist

import { create } from 'zustand';
import channelStore  from './module/channelStore';
import numStore  from './module/numStore';
import { persist } from 'zustand/middleware';
const useStoree = create(persist(set => ({...channelStore(set),...numStore(set)}),{name: 'my-store', // 存储的名字getStorage: () => localStorage, // 存储的方式})
)export default useStoree

持久化部分：

import { create } from 'zustand';
import channelStore  from './module/channelStore';
import numStore  from './module/numStore';
import { persist } from 'zustand/middleware';
const useStoree = create(persist((set) => ({...channelStore(set),...numStore(set)}),{name: 'my-store', // 存储的名字getStorage: () => localStorage, // 存储的方式 ,默认是 localStorage，也可设置 sessionStoragepartialize: (state) => ({ num: state.num }), // 持久化部分状态})
)export default useStoree