Создание простого SPA на VueJs с использованием CMS Strapi

[little-brother]

const h1 = reactive("Картинная галерея");

Я только начал разбираться с Vue 3, но вроде так не делают, а используют ref для примитивов.

Для управлением состояния внутри Vue.js рекомендуется использовать хранилище Vuex.

Уже pinia

Надо попробовать такую схему API.

C CORS проблем нет (dev сервер Vue будет же на другом порту чем CMS)?

[evoq]

Тоже интересно про CORS

[Spaceoddity]

Я только начал разбираться с Vue 3, но вроде так не делают, а используют ref для примитивов.

Не делают. И даже ref-ссылки нет никакой нужды тут использовать, это "реактовщина" какая-то)) Во Vue же специальный html-образный синтаксис шаблонов как раз для этого - хоть хардкодь какой-то контент, хоть реактивные данные подключай. А не писать половину представления в шаблоне, а другую половину через константы развешивать...

[GrigoriyMo]

с CORS проблем ни локально ни на проде (с учетом разных доменов и корректной настройке веб сервера) нет

[enkryptor]

Почему Vuex, а не рекомендуемая в текущей версии Pinia?

[GrigoriyMo]

Это просто пример приложения, как говорится хозяин - барин)

[interprise]

А какие альтернативы еще есть из серверных CMS на nodejs?

[GrigoriyMo]

К сожалению не подскажу, но уверен что в сети можно найти еще варианты

[Vadiok]

Ещё одна статья за короткое время, где стор отвечает за общение с сервером, а ответ хранится в сторе.

Стор нужен, чтобы шарить реактивные данные между компонентами. У вас же данные использует один компонент и даже их не кеширует, а каждый новый маунт запрашивает данные заново.

[doanonimit]

Ага, ещё и юзает страпи, который кроме примаков больше никаких ключей и индексов не поддерживает - миграции придумывайте сами, если какой уникальный надо нацепить или внешку

[GrigoriyMo]

Использование стора как хранение данных полученных с сервева - этот прием я взял из книги Vuejs в действии.

[doox911]

• const h1 = reactive("Картинная галерея"); - это вообще не рабочий код, с точки зрения реактивности. Проверить это можно при помощи isReactive. Из исходников: export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>. И итоге, если у вас не меняется заголовок, то можно было просто константой сделать.

• Vuex давным давно deprecated

• В моде нынче async/await

• Код js const gallery = computed(() => { return store.state.gallery; }); упрощается до const gallery = computed(() => store.state.gallery); Привет линтерам и форматерам.

• В компоненте App.vue можно обойтись без хука onMounted