zustand 切片模式使用,persist 中间件持久化状态

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,也可设置 sessionStorage
            partialize: (state) => ({ num: state.num }), // 持久化部分状态
          }
    )
)

export default useStoree
相关推荐
蓝婴天使10 小时前
基于 React + Go + PostgreSQL + Redis 的管理系统开发框架
react.js·postgresql·golang
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead12 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
今天头发还在吗12 小时前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js
需要兼职养活自己16 小时前
react【portals】与vue3【<Teleport>】
前端·react.js
用户479492835691516 小时前
React 19.2 重磅更新:终于解决 useEffect 依赖数组难题
前端·react.js
@PHARAOH16 小时前
HOW - prefetch 二级页面实践
前端·javascript·react.js
前端OnTheRun16 小时前
React18学习笔记(六) React中的类组件,极简的状态管理工具zustand,React中的Typescript
react.js·组件·
打小就很皮...17 小时前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
HHHHHY18 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js