Ленивый выбор данных в Vue + Vuex + TreeView - PullRequest
Новая
       21

Ленивый выбор данных в Vue + Vuex + TreeView

0 голосов
/ 04 марта 2020

У меня есть Vue компонент, который отображает данные из хранилища Vuex. Что я хочу сделать, это после загрузки компонента, визуализировать данные внутри компонента. При нажатии на кнопку расширения данные должны быть получены для данного идентификатора parentNode. После свертывания и развертывания того же элемента еще раз не должно быть дополнительного запроса, только один запрос. Такое поведение легко достижимо при использовании Vuetify Treeview с кодом, который я прикрепил ниже. Vuetify Treeview не поддерживает перетаскивание (с этой функцией Vuetify будет идеально для меня) ... Итак, вопрос в том, как изменить функцию getSitetreeItems так, чтобы она вызывалась только один раз для каждого расширенного parentNode, разрешить обещание в vue метод и рендеринг данных? 

<template>
  <div>
    <v-jstree :data="sitetree" draggable :async="getSitetreeItems"> </v-jstree>
  </div>
</template>

<script>
import VJstree from 'vue-jstree';
export default {
  components: {
    VJstree
  },
  computed: {
    sitetree() {
      return this.$store.state.sitetree.sitetreeItems;
    }
  },
  methods: {
    getSitetreeItems(item, resolve) {
      const index = `/?parentNode=${resolve.id}`;
      this.$store.dispatch('sitetree/GET_CHILDREN_ITEMS', index)
    }, 
  }
};
</script>

// Vuex code

const actions = {
  async GET_CHILDREN_ITEMS({
    commit
  }, item) {
    try {
      const response = await axios.get(url + item);
      commit('ADD_ITEM', response.data);
      return response
    } catch (error) {
      return error
    }
  }
}

Где в do c из vue -jstree asyn c функция выглядит так, что я не знаю, как заставить ее работать: 

 getSitetreeItems: function (oriNode, resolve) {
                    var id = oriNode.data.id ? oriNode.data.id : 0
                    setTimeout(() => {
                        let data = []
                        if (id > 200) {
                            data = []
                        }
                        else {
                            data = [
                                {
                                    "text": "New Item 1..." + id, "isLeaf": id > 100
                                },
                                {
                                    "text": "New Item 2..." + id, "isLeaf": id > 100
                                }
                            ]
                        }
                        resolve(data)
                    }, 500)
                },
                data3: [
                    {"text": "root"}
                ],
                filesToAdd: 1,
                filesToAddIndex: 0
            }

Над кодом по умолчанию просто показано, как работает asyn c -load, но только с использованием vue без vuex. Как вернуть обещание компоненту vue из vuex и добавить / отобразить компонент дерева с новыми данными?

РЕДАКТИРОВАТЬ: В Vuetify Treeview для load-child все, что мне нужно, это 

<v-treeview :items="items" :load-children="getSitetreeItems" />

//METHOD

 getSitetreeItems(item, resolve) {
      const index = `/?parentNode=${resolve.id}`;
      this.$store.dispatch('sitetree/GET_CHILDREN_ITEMS', index)
    },
...