In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.
ref
из функцииimport { ref } from 'vue'
const totalActive = ref(0)
export default function useVariablesSelectedMenu() {
// Функция для обновления переменной
const setColumnActivePages = (newValue: number) => {
totalActive.value++
}
return {
setColumnActivePages,
totalActive,
}
}
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>
);
};
Ключевой вопрос: а надо ли это всё вообще? Почему бы просто темплейт стринг не использовать и вставлять значения сразу? Без этих костылей.
template('Hello, {user.name}', { user: { name: 'Bob' } });
docker compose up --force-recreate
. Вам точно нужен dev режим в контейнере? 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();
};
Логики обновления страницы при закрытии модалки нет и в модалке событие @click="$emit('close') на закрытие, но она обновляется)
если в useFetch используется реактивная переменная, то она автоматически watch-ит валью, это я сегодня узнал, так что watch в начальном коде не нужен.
В рефах у меня:
HOST="127.0.0.1" npm run preview