Почему значение в composables не реактивно?

Jussss92, не совсем, из документации

In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

Их придумали для удобного переиспользования кода, использующего реактивные примитивы, а вы пытаетесь использовать это для глобального состояния. В принципе, так можно делать, но работать это будет не везде, например с SSR от этого будет течь память. Если у вас просто SPA, то достаточно вынести ref из функции

import { ref } from 'vue'

const totalActive = ref(0)

export default function useVariablesSelectedMenu() {
	// Функция для обновления переменной
	const setColumnActivePages = (newValue: number) => {
		totalActive.value++
	}

	return {
		setColumnActivePages,
		totalActive,
	}
}

Почему значение в composables не реактивно?

То есть вы в одном компоненте изменяете значение, а в другом хотите следить за изменениями?

Как сделать горизонтальный виртуальный скролл?

Использую Vue, просто упростил для примера, про виртуальный скролл я думал, но я не знаю заранее размеры элементов. Заголовки, параграфы, изображения - все это отдельные компоненты (на скриншотах в вопросе). + задача осложняется отображением колонками.

P.S. посмотрел API у TanStack, вроде можно задать даже колонки, спасибо попробую

Как лучше переписать условие?

Можно вынести в константу, но короче от этого не станет, в JSX/TSX только так)

export const Footer = (props?: IFooterProps) => {
    const body = props?.button ? (
      <>
        <RNHoleView style={styles.background} holes={[hole]}>
          <View style={styles.maskBorder}></View>
        </RNHoleView>
        {props.button}
      </>
    ) : (
      <View style={styles.background}></View>
    );

    return (
      <View style={styles.container}>
        {body}
      </View>
    );
};

Можно ли написать такой тип проще?

Ключевой вопрос: а надо ли это всё вообще? Почему бы просто темплейт стринг не использовать и вставлять значения сразу? Без этих костылей.

Часто в i18n используют, для меня просто интересная задача.

В любом случае WbICHA, Alexandroppolus спасибо за тест кейсы, придумал как сделать лучше

Можно ли написать такой тип проще?

Alexandroppolus, делаю функцию для подстановки значений в шаблон, условно

template('Hello, {user.name}', { user: { name: 'Bob' } });

Хочу сделать проверку объекта во втором аргументе.

Сами плейсхолдеры достаются регуляркой и тут важно достать только вложенный шаблон на любой глубине

Пример

В Nuxt 3 useFetch() вызывает ошибку Vue Router в Docker?

Айжарык, это уже другая проблема, не связанная с первой. Она в репозитории nitro еще не закрыта. Чтобы ее решить, можно попробовать добавить в volumes папку .nuxt, которую накст генерирует в dev режиме, либо запускать контейнеры с флагом docker compose up --force-recreate. Вам точно нужен dev режим в контейнере?

В Nuxt 3 useFetch() вызывает ошибку Vue Router в Docker?

Если ругается Vue Router, значит запросы к api попадают не на бэкенд, а на ваше nuxt приложение, ну и соответственно таких роутов не находит, посмотрите куда уходят запросы useFetch, может дело в прокси, раз проблема возникает в контейнере

Nuxt Supabase Как решить ошибку 500 "client.from is not a function"?

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

Как сформировать SQL запрос?

ORM случайно не обладает соответствующей функциональностью?

Там довольно простая обертка над обычным sql, насколько я понимаю. Есть пример запроса M2M, но у меня более сложный запрос, без подзапроса, как написали ниже, видимо не обойтись.

Почему Webview не отображает веб-страницы?

Эвотор проксирует все запросы через свое облако, в документации они предлагают настроить список разрешенных доменов - https://developer.evotor.ru/docs/doc_java_third_pa..., но это не распространяется на локальную сеть. Возможно причина в этом

Как правильно настроить refetch watch?

Soer44, К сожалению, это не отвечает на вопрос почему страница обновляется, из вашего кода я не увидел причину, по которой это могло бы происходить. Тут я уже ничем не помогу, только дебаг, console.log и все такое. Свой вариант решения я предложил, он должен работать.

А лучший учитель - документация, тем более, что понятнее документации, чем у vue, еще нужно поискать)

Как правильно настроить refetch watch?

Soer44,
В вашем примере объявлен useFetch, который делает запрос на удаление и возвращает реактивную переменную с результатом запроса, ошибкой, и функций, которая повторно выполнит этот запрос

const deleteBook = async () => {
  const bookId = selectedBook.value.id;
  const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIwY2Y5Nzk0Yi1jYjczLTcyQ";
  const { data, error, refresh } = await useFetch<{ results: Book[] }>(
    `https://api.storage/${bookId}`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      method: "delete",
      server: false,
    }
  );
  if (error.value){
    console.error(error.value)
  } else {
    isBookDeleted.value = true;
    showBookDetails.value = false;
  }
  refresh();
};

На последней строке вы как раз и повторно вызываете удаление книги.

Как правильно настроить refetch watch?

Soer44, как это не повторный запрос? Вызов refresh просто заново делает запрос на ваш эндпоинт и перезаписывает содержимое data

Как правильно настроить refetch watch?

Soer44, а зачем вы делаете повторный запрос на удаление?

Как правильно настроить refetch watch?

Soer44,

Логики обновления страницы при закрытии модалки нет и в модалке событие @click="$emit('close') на закрытие, но она обновляется)

Код модалки в студию

если в useFetch используется реактивная переменная, то она автоматически watch-ит валью, это я сегодня узнал, так что watch в начальном коде не нужен.

useFetch сам ничего не watch-ит, только если передать в options параметр watch, но в вашем случае и оно не нужно

В рефах у меня:

4 ref'а - избыточно, у вас всего два состояния: выбранная книга и видимость модалки удаления.

Как правильно настроить refetch watch?

Soer44, нужно смотреть какие у вас значения в ref'ах, тогда будет понятно почему отображаются компоненты. Из того кода, что я приложил, модальное окно может быть открыто при условии: выбрана книга, либо активен флаг успешного удаления. При закрытии страницы, страница обновляться не должна, там попросту нет этой логики. Правда я забыл добавить повторный запрос на выборку списка книг, это нужно делать в блоке else метода deleteBook.

const deleteBook = async (book: Book) => {
  const { error } = await useFetch(`https://api.storage/${book.id}`, {
    method: "DELETE",
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  if (error.value) {
    apiErrorHandler(error.value);
  } else {
    showDeleteModal.value = true;
    selectedBook.value = null;
    refresh(); 
  }
};

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Soer44, никак, наверное) А с какой целью?

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Soer44, поменяйте
const currentForm = ref<Component | null>(null);
на

const currentForm = shallowRef<Component | null>(null);

Отображение рендеринг динамических компонентов на странице Vue3 Nuxt?

Soer44, имеете ввиду повторном нажатии на кнопку?