Как сохранить компонент vue со всеми изменениями и затем отрендерить этот компонент в таком же состоянии?

Question

[GizzaProger]

Всем доброго.
Пользователь проходит задания и в любой момент может закрыть вкладку с уже частично или полностью пройденными заданиями.
Нужно сохранить его прогресс в базе данных и при следующем открытии этих заданий показать ему задания с прогрессом.
То есть нужно сохранить прогресс пользователя, чтобы он потом его получил и вывел.
Хотел сделать так
Создать карту компонентов и при помощи render функции поочерёдно начать рендерить компоненты.
Для этого реурсивно вызывал что-то вроде

function recursion(el, callback) {
     callback(el);
     callback(el.$children);
}

Но обычные теги типа div, span и т.д. не входят в $child. Из-за этого перебор не полный.
Может быть есть другой способ или как-то можно мое решение допилить?

Comments

[alexalexes]

Какой концепции фиксации действий клиента вы следуете?
1. Клиент проходит весь список тестов, после происходит рапортование на сервер.
2. Клиент делает любое значащее действие, сведения об этом действии сразу передаются на сервер.
И второй вопрос, как вы инициализируете компонент в методах жизненного цикла mounted, beforeMount, created или beforeCreate?
Если вы не знакомы с этими методами, то вопрос отпадет, если вы их реализуете с учетом концепции 2, то есть при инициализации компонента запрашиваете то, что сохранено на сервере от предыдущего сеанса теста, и вы восстановите состояние компонента до последнего значащего действия пользователя.

[GizzaProger]

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

[alexalexes]

Тогда вам надо иметь ввиду, что при инициализации либо всего объекта vue либо набора компонентов, бизнес логика теста может разветвиться, исходя из состояния прохождения теста.
От сервера запрашиваете данные клиента.
1. Если он не начинал тестирование, то инициализируете состав компонентов для старта тестирования.
2. Если клиент стоит на каком-то вопросе, то инициализируете набор компонентов и подгружаете данные для них, тем самым вы построите промежуточное состояние теста. Не обязательно, что этот процесс будет в виде сериализации и десериаизации компонентов. Это самый простой, но грубый способ, так как в базе данных, данные хранятся по свойствам, и собирать объект-клон лучше тоже по свойствам.
3. Если клиент завершил тестирование, то компоненты прохождения тестирования могут вообще отсутствовать, присутствовать только отчет о пройденном тестировании, например.
Сложно подсказать, где должно находится такое ветвление в вашем проекте, но оно должно быть реализовано на каком-то из этапов инициализации компонентов.