Zustand结合Tauri plugin-store自定义存储时状态更新报错求助

出现[zustand persist middleware] Unable to update item 'storage', the given storage is currently unavailable.错误的核心原因是变量声明顺序问题：你在useBearStore之后才定义storage变量，导致Zustand初始化persist中间件时，无法获取到有效的StateStorage实例，进而判定存储不可用。

修复步骤 #

1. 调整代码顺序：将storage的定义移至useBearStore之前，确保Zustand创建持久化存储时，storage已经完成初始化。
2. 可选：确保Tauri Store初始化完成：虽然Tauri的Store构造函数可以直接调用，但如果遇到初始化时机问题，可以等待Tauri App就绪后再使用存储（比如通过await appReady()）。

修改后的完整代码 #

import { create } from 'zustand'
import { persist, createJSONStorage, StateStorage } from 'zustand/middleware'
import { Store } from '@tauri-apps/plugin-store';

// 初始化Tauri Store
export const store = new Store('globalStore.bin');

// 先定义自定义storage
const storage: StateStorage = {
    getItem: async (name: string): Promise<string | null> => {
        console.log(name)
        return (await store.get(name)) || null
    },
    setItem: async (name: string, value: string): Promise<void> => {
        console.log(name, value)
        await store.set(name, value)
    },
    removeItem: async (name: string): Promise<void> => {
        console.log(name)
        await store.delete(name)
    },
}

interface MyState {
    bears: number
    addABear: () => void
}

// 再创建Zustand Store
export const useBearStore = create<MyState>()(
    persist((set, get) => ({
            bears: 0,
            addABear: () => set({ bears: get().bears + 1 }),
        }),
        {
            name: 'storage', // 存储在Tauri Store中的键名
            storage: createJSONStorage(() => storage),
        },
    ),
)

额外注意点 #

• Tauri的Store操作都是异步的，你的storage实现中已经正确使用await，这部分没问题。
• 如果仍然遇到问题，可以检查Tauri的权限配置，确保plugin-store已在tauri.conf.json中启用。

内容的提问来源于stack exchange，提问作者LoKa