Какой пакет «моделей» для VueJS выбрать?

Question

[Евгений Вольф]

Доброго времени суток коллеги!

Порекомендуйте пожалуйста, из Вашего опыта, какую-нибудь толковую библиотеку для работы с моделями для VueJS. Суть проблемы, вкратце:
1. Пробовал работать без сторонних библиотек (моделей) вообще - результат - ужасно много однообразного мало читаемого кода.
2. Попробовал http://vuemc.io - выглядит неплохо, но на поверку оказалось, что всё не так хорошо, как кажется. Например, событие "save.success" - мне так и не удалось поймать (возможно плохо ловил), событий (или "хуков") формата "beforeSave" я вообще не нашел (возможно так же, плохо искал?), по умолчанию сохраняются только атрибуты 1-го уровня, т.е. массивы (вложенные элементы) не сохраняются и как это исправить, в документации я ответа не нашел, к сожалению.

P.S. Убедительная просьба, указывать не первые попавшиеся ссылки из поисковика, а решения с которыми Вы сталкивались лично и которые, как минимум позволяют загружать/сохранять/обрабатывать поля с глубокой вложенностью (т.е. массивы, массивы объектов и т.д.), с полноценной поддержкой событий, таких как загрузка/сохранение и полноценной обработкой результатов и ошибок (загрузки/сохранения). Спасибо.

Comments

[Alex Wells]

Имхо это какая-то дичь. Как будто разработка сводится только к crud'у..

[Евгений Вольф]

Alex Wells, дело не в том, что "разработка сводится к CRUD'у", дело в том, что "даже разработка CRUD'а вызывает большие сложности" (а CRUD, как известно - это одна из самых банальных вещей в данном направлении).

[Сергей delphinpro]

Alex Wells, CRUD - это однотипные действия, почему бы не вынести их в библиотеку?

[Programmir]

Скоро для каждого пука будут подключать библиотеки, если уже не подключают)

[Евгений Вольф]

Programmir, вы не поверите, они уже это делают... причём давно! Пример, из жизни: нужно сделать что-нибудь достаточно простое, например, скрывать/показывать некий элемент по клику на другом элементе... и ради этого, подключают библиотеку целую (JQuery)... мне кажется, этот процесс уже необратим :)))

[Сергей delphinpro]

Евгений Вольф, ну это клинический случай, не стоит брать в расчет.

[bro-dev]

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

[Евгений Вольф]

bro-dev, Вы не могли бы привести какой-то пример кода "из жизни" или ссылку на описание подобных практик? Т.к. со слов, (по крайней мере мне), очень сложно понять, почему, если всё так просто и "библиотеки не нужны", для решения этого вопроса - с библиотеками всё-таки туговато, а те что есть - имеют версию - 0.2.0 и по функционалу для решения данной задачи не дотягивают (хотя по первичному описанию подходят идеально). И это всё при том, что для решения куда более банальных и простых задач (например, копирования файлов) - различных библиотек написано масса и никто вопросом "перехода на абстракции" в данном случае, судя по всему никто не озаботился.

[Евгений Вольф]

bro-dev, вопрос c примером снят, решил обойтись без "провайдеров", просто написал собственную модель, потратив на это всего несколько часов (что много меньше, чем я потратил на попытки сделать из гавна конфеты vue-mc то, что мне нужно. Спасибо Вам большое, что натолкнули на верную мысль.

Answer 1

[Spunreal]

Работаю с vuex-orm
Пока серьёзных проблем не замечаю.

Answer 2

[Денис Лабутин]

Пользуюсь vue mc.
Чтобы сделать вложенные объекты необходимо воспользоваться мутациями

mutations() {
		return {
			id: (id) => String(id) || null,
			serial: Number,
			date: String,
			salary: Number,
			status: Number,
            supplies: (supplies) => {
				if(Array.isArray(supplies)){
					return new SupplyCollection(supplies)
				}else if(supplies instanceof SupplyCollection){
					return supplies;
				}
				return new SupplyCollection();
			},
			materials: (materials) => {
				if(Array.isArray(materials)){
					return new MaterialCollection(materials)
				}else if(materials instanceof MaterialCollection){
					return materials;
				}
				return new MaterialCollection();
			},

        }
	}

Comments

[Евгений Вольф]

А значение свойства по умолчанию у Вас как объявлено?

Я перепробовал все известные мне варианты, результатов нуль. Исходный код:

//Сущность "одна картинка", условный пример
class Image extends Model {
        defaults() {
            return {
                id: null,
                mime: null,
                height: 0,
                width: 0,
            }
        }
    }

//Коллекция картинок
    class ImageList extends Collection {
        model() {
            return Image;
        }
    }
    
//Некий абстрактный продукт, который содержит набор картинок (по ID)
    class Product extends Model {
        defaults() {
            return {
                id: null,
                images1: Collection, //Если тут по умолчанию указать массив "[]" - будет ошибка при загрузке данных, из-за мутации. Если не указать ничего - будет ошибка во View'шке, при обработке отсутствующего свойства. Если указать "new ImageCollection()" - будет ошибка валидациии модели, т.к. создавать таким образом нельзя, если указать "null" - и переопределить это свойство как коллекцию позже - работать будет, но эффекта никакого не даст
            }
        }

        mutations() {
            return {
                id: (id) => Number(id) || 'new',
                catalog_id: (catalog_id) => Number(catalog_id) || null,
                // images: (images) => {
                //Мутация, которая не работает
                // },
            }
        }
    }

Резюмирую происходящее, вкратце, могу сказать что загружаться данные в свойство "images" ("images1") и ранее отлично загружались, безовсяких мутаций и прочих шаманств. Проблема в том, что они не сохраняются при Model.save();

[Денис Лабутин]

Евгений Вольф,
Я дефолтные значения вообще не указываю, либо ставлю null

class Product extends Model {
        defaults() {
            return {
                id: null,
                images1: Collection, //Если тут по умолчанию указать массив "[]" - будет ошибка при загрузке данных, из-за мутации. Если не указать ничего - будет ошибка во View'шке, при обработке отсутствующего свойства. Если указать "new ImageCollection()" - будет ошибка валидациии модели, т.к. создавать таким образом нельзя, если указать "null" - и переопределить это свойство как коллекцию позже - работать будет, но эффекта никакого не даст
            }
        }

        mutations() {
            return {
                id: (id) => Number(id) || 'new',
                catalog_id: (catalog_id) => Number(catalog_id) || null,
                images: (images) => {
                     // При получении с сервера данных в виде массива оборачиваем в класс
                     if(Array.isArray(images)){
                            return new ImageList(images)
                     // Здесь костыль при определенных моментах, не помню  когда срабатывает, но это нужно )
                     }else if(images instanceof ImageList){
                            return materials;
                     }
                     return new ImageList();
                },
            }
        }
    }