Recosh
@Recosh
Программист студент

Как правильно записывать/отправлять данные во vuex из вложенного дерева компонентов?

Во vuex нужно сохранять данные через мутации, чтобы работала машина времени и пр...
Вопрос, как в данном примере правильно записать данные об изменении чекбоксов в vuex через commit?
https://jsfiddle.net/3p0j5sgy/1122/

Каждый дочерний компонент не имеет доступа ко всему дереву и менять через цикл перебором тоже не очень производительно, когда данных будет в тысячи строк. Прошу помощи в написании лёгкого и элегантного решения.
  • Вопрос задан
  • 904 просмотра
Решения вопроса 2
kleinmaximus
@kleinmaximus
Senior Full-stack Javascript Developer
По сути, компонент item - "глупый" компонент (чистая функция), поэтому лучше бы все изменения, которые он производит вернуть событиями по цепочке в ближайший "умный" компонент, а тот уже пусть выполняет нужные преобразования в хранилище.

https://jsfiddle.net/3p0j5sgy/1125/ - это то, что нужно?
Ответ написан
Кирилл Петров, проблема в том, что чтобы обновить узел дерева, его как-то надо найти, я тут вижу пока два решения
1) использовать какую нибудь структуру, типа Б-деревьев или бинарных деревьев, и тогда осуществлять поиск узка в дереве будет быстро и просто, но тут сокрее всего нужно добавлять id к узлам и писать алгоритм работы с деревьями
2) на стадии рендера вью для каждого узла расчитывать путь в виде строки, чтобы потом на input'е можно было бы передать этот путь в обработчик
data[2].children[3].name // child folder
https://lodash.com/docs/4.17.4#update
что то типа такого

<input type="checkbox" :value="model.checked" @input="handleChecked(path, !model.checked)">

// methods of component
function handleChecked(path, checked) {
    // вызываем экшен сторы и передаем путь и checked флаг
    this.$store.dispatch('checked', {path: path, checked: checked })
}


// Store
{
    actions: {
        checked: function(store, payload) {
            store.commit('updateChecked', payload)
        }
    },
    mutations: {
        updateChecked: function(state, payload) {
            _.update(state.data, payload.path, function(node) { 
               node.checked = payload.checked;
               return node;
           });

           state.data = state.data.concat([]); // создать НОВЫЙ массив, чтобы запустить ререндер
        }
    }
}


как то так, это чисто псевдокод, надо доводить до рабочего состояния
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы