如何在浏览器开发工具中处理多个 zustand 存储

Question

我是 zustand 的新手，但我立即创建了两个商店，我希望能够在浏览器开发工具上看到这两个商店的行为

使用

import {devtools} from 'zustand/middleware'

当时我只拥有一家商店。 尝试从 '@pavlobu/zustand/middleware' 导入 {devtools} 但什么也没有 还有 zukeeper 什么都没有

Answer 1

您可以通过以下方式使用：

const Store1 = create(devtools((set) => ..., { name, store: storeName1 }))
const store2 = create(devtools((set) => ..., { name, store: storeName2 }))

或者您可以像这样合并两个商店：

const useStore = create(
  devtools((...a) => ({
    ...createStoreSlice1(...a),
    ...createStoreSlice2(...a)
  }))
);

我建议您还阅读这篇关于 Zustand 中的切片模式的文章： https://docs.pmnd.rs/zustand/guides/slices-pattern