Как изменять вложенные комментарии (объекты) в vuex store?

Добавил хранилище для комментариев, которое имеет вид:
/**
 * STATE
 * 
 */
const state = {
    comments: [],
    errors: [],
    commentsLoaded: false
}
........


comments представляет собой массив объектов комментариев, в котором существует свойство reply, являющееся массивом с такими же объектами комментариев:

Структура для примера
comments: [
        {
            id: 1,
            replies : [
                {
                    id: 2
                },
                {
                    id: 3,
                    replies: [
                        {
                            id: 4
                        }
                    ]
                }
            ]
        },
        {
            id: 5,
            replies: []
        },
        {
            id: 6,
            replies: []
        }
    ],


Какую задачу я решаю: пользователь может добавить ответ, к какому-то комментарию, соответственно после добавления комментария на сервер, я получаю от сервера добавленный комментарий и делаю commit.
Проблема заключается в том, что я по ID комментария (на который пользователь дал ответ), ищу его в своем массиве и пушу новый комментарий в comment.reply.

Сначала это выглядело так:
ADD_REPLY(state,{comment_id,data}) {
        state.comments.find(c => c.id === comment_id).replies.unshift(data);
    },

И это работало для глубины вложенности = 1, как только я пытаюсь дать ответ на вложенный комментарий (глубина вложенности > 1) , данная функция уже не работает.

Пытался искать комментарий и с помощью flatMap:
state.comments.flatMap(comment => comment.replies).find(c => c.id === comment_id);

но почему-то flatMap возвращает все, кроме комментария, на который дается ответ (я так понимаю что проблема в том, что последнее вложение функция не показывает).
Пробовал и подобное:
state.comments.flatMap(function loop(node) {
            if (node.replies) {
                return node.replies.flatMap(loop);
            } else {
                return [node];
            }              
        })


Но как я понимаю, прямого доступа к объекту я не получаю, а лишь к новому, то есть не могу его изменить.

По мере гуглинга проблемы стал все чаще и чаще встречать сообщения о том, что это не совсем простая задача, да и вообще, надо хранить данные иначе. Как все-таки правильно работать с вложенностью большого уровня?
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Передавайте в мутацию вместо id сам объект комментария - тогда ничего искать будет не надо.

Или сделайте рекурсивную функцию поиска, что-то вроде

const find = (arr, id) =>
  (Array.isArray(arr) ? arr : []).reduce((found, n) =>
    found || (n.id === id ? n : find(n.replies, id))
  , null);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы