Как спроектировать архитектуру проекта использующего Vue3 и API module pattern?

Question

[Ejex Xeffer]

У меня имеется написанное, пока что простое, api.
Есть instance axios:

import axios from 'axios'

const defaultConfig = {
  baseURL: import.meta.env.VITE_VUE_APP_BASE_URL,
  withCredentials: true,
  headers: {
    accept: 'application/json',
  },
}

const DefaultAPIInstance = axios.create(defaultConfig)

export { DefaultAPIInstance }

export default {
  DefaultAPIInstance,
}

И его примерное использование:

import { DefaultAPIInstance } from '@/api'

function signIn(payload) {
  return DefaultAPIInstance.post('/api/auth/login', payload)
}
function signUp(payload) {
  return DefaultAPIInstance.post('/api/auth/registration', payload)
}
function logOut() {
  return DefaultAPIInstance.post('/api/auth/logout')
}
export { signIn, signUp, logOut }

export default {
  signIn,
  signUp,
  logOut,
}

Во vue3 существует возможность отделить логику и состояние от остального компонента. Предполагается, что statefull модуль может выполнять некоторые задачи, на выходе отдавая данные.
Тут начинаются вопросы:

• Cтоит ли обернуть все эти запросы в composables?
  
• Лучше использовать pinia так как рекомендуют для работы с запросами к api?
  
• Оставить всё как есть ведь это и так лучший вариант?
  

Проблемы примерно такие:
Pinia пока самый беспроблемный вариант. Мы пишем туда данные, забираем их оттуда же. Всё снаружи как и сейчас, логика использования уже внутри компонента.

try {
        const response = await signIn({
          email: values.email,
          password: values.password,
        })
        const expirationDate = new Date(Date.now() + 60 * 60 * 1000)
        document.cookie = `access_token=${
          response.data.access_token
        }; expires=${expirationDate.toUTCString()} path=/`
        this.$router.push('/')
      } catch (error) {
        this.errorServer = error.response.data
        this.errorValues = values
        console.error(error)
      }

Если мы оборачиваем всё в композиции то можем сразу использовать данные импортированные из композиций.
Что то я в этой каше совсем запутался.

Answer 1

[Aetae]

Ну так не надо делать кашу.)

Используйте только то что нужно, когда нужно:
Ответ на запрос к api нужен только в рамках компонента? Просто запрашивайте в рамках компонента.
Ответ должен быть использован в нескольких не связанных местах? Используйте стор(pinia или любой иной).

Как ты собрался "обернуть все запросы в composable" - непонятно. Composable нужны для работы с логикой компонента, запросы api никак с этим не связаны, они просто поставляют данные. Если с этими данными потом уже нужна какая-то хитрая работа - тогда можно делать composable, который просто внутри себя будет использовать твои отдельные api модули. Смешивать всё в кучу точно не нужно.

P.S. Composable - это не какая-то особая тумба-юмба, если не очевидно, это просто обычные функции. От любых иных они отличаются только тем, что внутри себя используют vue-хуки(тоже просто функции), а потому привязаны к компоненту внутри которого вызываются и не могут работать вне компонента.

P.P.S. Те кто рекомендуют пихать запрсы в стор - долбоёбы. Были во времена vue2 остались и сейчас. Стор - это хранилище, он хранит. Работа с api должна быть от него отделена, иначе получится каша.

Comments

[Ejex Xeffer]

Спасибо за помощь. :)