Я использую Vue 3 с Nuxt 3 и Vite и столкнулся со странной ошибкой. Это происходит почти везде в моем приложении, когда я пытаюсь использовать useFetch внутри составного объекта.

Например, у меня есть следующая компоновка, позволяющая проверить, можно ли отобразить кнопку в зависимости от роли пользователя:

useCheckerRole Составной

export function useCheckerRole(policies){
  const {data, error} = await useFetch("/api/role-checker", {
    method: "POST",
    body: policies
  })

  if (data.value) {
    return data.value
  }

  if (error.value) {
    throw new Error("an error occured");
  }
}

Затем мне нужно будет передавать такие политики всякий раз, когда мне нужно будет проверить их роли.

const policies = await useCheckerRole([
  {
   component_ask: 'some-button',
   role_ask: 'administrator'
  }
])

который затем возвращает что-то вроде этого из API:

  [{
   component_ask: 'some-button',
   role_ask: 'administrator',
   status: 'approved'
  }]

Баг

Ошибка проявляется, когда я монтирую useCheckerRole в двух разных компонентах на одной странице.

Например, в моем компоненте верхней панели я использую useCheckerRole, чтобы определить, должна ли отображаться конкретная кнопка или меню, в зависимости от роли пользователя. Между тем, в другом месте страницы у меня есть еще одна кнопка, требующая аналогичной проверки на основе ролей.

TopBar.vue

Верхняя панель отправляет это в средство проверки ролей, а затем немедленно записывает результат.

const policies = await useCheckerRole([
  {
   component_ask: 'top-bar-button',
   role_ask: 'administrator'
  }
]).catch((error)....)

console.info("topBar Policies result", policies)

ChildPage.vue

Дочерняя страница отправляет это в useCheckerRole и немедленно регистрирует результат.

const policies = await useCheckerRole([
  {
   component_ask: 'child-page-button',
   role_ask: 'administrator'
  },
  {
   component_ask: 'child-page-other-button',
   role_ask: 'administrator'
  },
]).catch((error)....)

console.info("Child Policies result", policies)

TopBar.vue Результат

теперь результат Topbar выглядит интересно:

🐞 Что получил TopBar

[
  {
   component_ask: 'child-page-button',
   role_ask: 'administrator',
   status: "approved"
  },
  {
   component_ask: 'child-page-other-button',
   role_ask: 'administrator',
   status: "rejected"
  },
]

Обратите внимание, что это было не то, что компонент Topbar отправил в useCheckerRole, а то, что отправил ChildPage.

✅ Что должен был получить TopBar

[
  {
   component_ask: 'top-bar-button',
   role_ask: 'administrator',
   status: "approved"
  },
]

ChildPage также получил тот же результат, что и Topbar:

[
  {
   component_ask: 'child-page-button',
   role_ask: 'administrator',
   status: "approved"
  },
  {
   component_ask: 'child-page-other-button',
   role_ask: 'administrator',
   status: "rejected"
  },
]

Это заставило меня понять, что составные объекты не так изолированы, как я думал при использовании useFetch, или, возможно, я делаю что-то очень неправильно. Потому что похоже, что оба компонента одновременно вызывали одну и ту же неизолированную функцию, даже если указанная функция должна быть изолированной.

Первоначальный результат в TopBar был правильным. Однако когда ChildPage также вызвал ту же функцию, она каким-то образом переопределила результат, что, к сожалению, не было тем, что запрашивал TopBar.

Есть ли у кого-нибудь еще эта проблема?