Store uses another store (composing stores, share getters, share methods)

[kienkhang]

Is there a way to call another store while inside a store?

Currently, when I call a store inside another store to use it, I get the error "Invalid hook call. Hooks can only be called inside of the body of a function component."

I can do this easily with Vue's composing stores ideas like Pinia library, and vueuse's createGlobalState.

How can zustand handle this?
Here is my sample code:

import { create } from "zustand";

interface IUser {
  id: string;
  token: string;
  name: string;
}

interface UseAccStore {
  user: IUser | null
  login: (username: string, password: string) => Promise<IUser>
  logout: (token: string) => boolean
}

interface CartStore {
  items: string[]
  addCart: (item: string) => void
  orderCart: () => Promise<boolean>
}


const useAccStore = create<UseAccStore>((set) => ({
  user: null,
  async login(username, password) {
    const res = await api.login(username, password)
    if (res) {
      set({ user: res })
      return this.user as IUser
    }
    return this.user as IUser
  },
  logout(token: string) {
    return true
  }
}))

const useCartStore = create<CartStore>((set, get) => {
  const { user } = useAccStore() // 👉 using account store in here to get 'user'
  return {
    items: [],
    addCart(item) {
      set(state => ({
        items: [...state.items, item]
      }))
    },
    async orderCart() {
      const res = await api.orderCart(user.id, get().items)
      if (res) {
        return true
      }
      return false
    },
  }
})

[dai-shi]

      async orderCart() {
+       const { user } = useAccStore.getState()
        const res = await api.orderCart(user.id, get().items)

I don't mean doing this is recommended.