Store & propertyNames

[xGenovax]

Hellow !

I'm trying to use your nice component on a project, unfortunatly I just encountered several problems :(

So, the component beeing unable to update using computed props on :data, I noticed u added the new store option which I'm trying to use.

• Firstly I noticed that changing the propertyNames.children and propertyNames.id weren't working anymore (but text still works).
• Secondly I'm still unable to use Store's module

My tree options
treeOptions: { store: { store: this.$store, getter: "treeStore", mutations: ["updateTree"] }, checkbox: true, propertyNames: { text: "myname", children: "mychildren" }, filter: { plainList: true } }

My Store:
import forest from "./forest" const store = new Vuex.Store({ modules: { forest }, });
My Store module "forest"
export default { namespaced: true, treeStore: [], getters, mutations: { updateTree(state, newData) { state.treeStore = newData; } }, actions };

Could you give me a hand in order to solve those problems please?
Thank you kindly :p.

[amsik]

Hi! Thanks for using the library!
It is not possible to use Vuex with modules now. Try without it. I will do it as soon as possible.

[xGenovax]

Thank you for your answer :).
And about the propertyname parameters, is it a bug ?
I'm using the store option in order to keep the LiquorTree updated with my vuex, but now I can't access my nodes and objects's id because the PropertyNames options children and id aren't working anymore :o
So by now I have to rename each of my datas' nodes before storing into my store xD

[Splinterjke]

Приветствую, Константин. Есть ли какие-то продвижения по поводу vuex? Mutations не отрабатывают. Данные для геттера лежат в одном из модулей, с ним все ок, но в таком случае после любой выбранной ноды перестает работать expand/collapse в дереве в целом, классы для hover и selected.
Либа шикарна, уходить с нее не хочется, но стор душит.

[amsik]

Изменил поведение библиотеки с Vuex. Еще докумнтацию не обновил, пока нет возможности это сделать. Но в примерах надеюсь все очень понятно сделано. Надеюсь поможет :) Пишите, если что-то не будет получаться или появятся какие-либо вопросы.
пс. Обновленная версия доступна на npm

[Splinterjke]

Однако, если геттер возвращает у объекта поле, представляющее массив для дерева, то сталкиваюсь с тем, что у выбранной ноды изменяется state, но expand/collapse перестает работать, как и классы для hover и selected. Видимо без отдельного объекта в state для дерева не обойтись. В прошлой версии можно было обойтись только геттером, сейчас диспатч метод обязателен, но стейт (объект с полем для дерева, описанный выше) у нас меняется в другом мутаторе после запрос к api. Выкглядит удобным вариант подписываться через геттер и делать ререндер при обновлении объекта. Сейчас форсим это через локальный метод, который тоглит объект в v-if для дерева и после селектим ноду, которая была выбрана до перерисовки, костыль, но пока единственный способ реактивно ререндерить дерево. пс. в своем кейсе также используем propertyNames
пс.2 пробовали другие деревья из списка vue-awesome, нигде нет нормальной связки с vuex, где-то деревья ререндерятся сами при изменении стейта, но перестают отвечать на инпут события + все еще нужно запоминать выбранную ноду до обновления.

[amsik]

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

Vuex не разрешает определять нескольно геттеров одним именем (даже в модулях), поэтому возможно и есть смысл сделать как и mapGetters, но вдруг будет другой кейс. где нужно будет сделать что-то эдакое :)

Долго думал о решении, но как по мне, данный подход решает любой кейс:

• Что-то сделал с хранилищем - проверели, не изменилось ли дерево (это еще не реализовано, всмысле проверка) - отрисовали.
• Что-то сделали с деревом (пользователь): выделили, удалили - вызываем диспатчер, который уже решит что с новым состоянием делать.

Этот подход может быть использован и для других store, нужно только реализовать subscribe и будет все так же работать, как и с Vuex. Пока таких кейсов не приходило :)

[amsik]

Делал не мало тестов, и единственное что нашел - так это потеря фокуса дерева. Этим займусь, как освобожусь чуток. Можно глянуть на Ваш пример (либо что-то близкое) ? Подумаю, что можно будет с этим сделать

[Splinterjke]

В модуле есть стейт:
state: { contract: null }
В разных экшенах делаем запрос к api и мутируем стейт:
state.contract = payload.data;
В этом модуле для дерева указан геттер:
getTreeData: state => { if (state.contract == null) return []; return state.contract.clause.clauseParts; }
Внутри clauseParts могут быть другие коллекции clauseParts (вложенность n уровня)
treeOptions:
treeOptions: { propertyNames: { text: "name", children: "clauseParts" }, store: { store: this.$store, getter() { return this.$store.getters.getTreeData }, dispatcher(tree) { this.$store.dispatch('updateTree', tree) } } multiple: false }
Экшен updateTree также создан, пробовал вариант, где внутри этого экшена нет логики т.к. contract.clause.clauseParts обновляется с изменением contract в других экшенах. Пробовал вариант с логикой в updateTree, где в contract.clause.clauseParts записываю map от tree параметра т.к. tree в мутации имеет объект дерева, из которого мне нужно выдрать data из node, чтобы записать в contract.clause.clauseParts. Пробовал вариант с отдельным стейтом для дерева и его обновлением в мутации уже без map. Всегда получаю результат, что после первого выбора ноды мы не можем больше экспандить ноды и стили select/hover не применяются, но ноды все еще можно селектить.

[amsik]

А можно глянуть updateTree?

[Splinterjke]

contracts.mutations.updateTree = (state, value) => {
  let tree = value.map(a => a.data);
  clausePartHelper.handleClauseParts(tree);
  state.contract.clause.clauseParts = tree;
  //state.contract.clause.clauseParts = [...tree];
};
contracts.actions.updateTree = (context, value) => {
  context.commit("updateTree", value);
};

clausePartHelper.handleClauseParts() применяется также для contract.clause.clauseParts везде, где есть мутация contract.
clausePartHelper.handleClauseParts():

handleClauseParts: function(clauseParts) {
    clauseParts.forEach(value => {
      if (value.clauseParts != null) {
        this.handleClauseParts(value.clauseParts);
      }
      let val = Object.assign({}, value);
      value.data = val;
    });
}

[amsik]

Любое изменение в строре - заставит обновить данные в дереве. Т.е. Прийдут с сервера, либо вызов api... В нашем случае вернет:

getTreeData: state => { 
  if (state.contract == null) return []; 
  return state.contract.clause.clauseParts; 
}

Какая бы ни была сложная логика - что вернет этот геттер, то и увидем в дереве. Если что-то было выделенно, а дерево это не нарисовало - значит что-то вернулось не верное...

contracts.mutations.updateTree = (state, tree) => {
  state.contract.clause.clauseParts = tree;
};

Этого должно быть достаточно... на крайний случай this.$set

[Splinterjke]

tree в параметре это объект дерева (аналогичный $refs.tree.model, но меньше), а clauseParts это объект с бэка, в нем нет изначально statesб children, data. С помощью handleClauseParts я создаю data для clauseParts, чтоб в data нод дерева был clauseParts[i]. Кстати, states у нод в объекте tree не изменяется, может поэтому ui select и expand не отрабатывают?

[amsik]

Изначально в clauseParts нет states, все верно. Но после первого кола updateTree - они появятся и буду работать. Если же конечно это св-во не обновляется с сервера постоянно. В это случае делать это лучше через fetchData, тогда и clauseParts обновится через мутации.