1回答

张轩

2024-12-16

在 Zustand 的 persist middleware 中，merge 属性允许你自定义如何合并持久化的状态和初始状态。以下是一些示例：

import create from 'zustand'
import { persist } from 'zustand/middleware'

// 定义状态接口
interface TagState {
  tags: string[]
  addTag: (tag: string) => void
}

const useTagStore = create<TagState>()(
  persist(
    // 定义状态和方法
    (set) => ({
      tags: [], // 初始空数组
      addTag: (tag) => set((state) => ({ tags: [...state.tags, tag] })), // 添加标签方法
    }),
    {
      name: 'tag-storage', // 存储的键名
      
      // merge 函数用于自定义如何合并持久化数据和初始状态
      // persistedState: 从 localStorage 读取的数据
      // currentState: 当前代码中定义的初始状态
      merge: (persistedState: any, currentState: TagState) => {
        return {
          ...currentState, // 保留当前状态的所有内容
          // 合并数组:
          // 1. 保留当前状态的 tags
          // 2. 添加持久化数据中的 tags (如果存在)
          // 3. 使用 Set 去重
          tags: [...new Set([
            ...currentState.tags,
            ...(persistedState.tags || [])
          ])]
        }
      }
    }
  )
)

// 使用示例:
// const { tags, addTag } = useTagStore()
// addTag('新标签') // 会自动合并并持久化

1

1

weixin_慕丝4457541

感谢感谢，等我应用一下

2024-12-16

共1条回复