Обновления массива Vuex Axios - PullRequest
Новая
       8

Обновления массива Vuex Axios

0 голосов
/ 20 ноября 2018

В настоящее время у меня проблема с VueJS vuex и Axios:

Я получаю массив с axios -> цикл по этому массиву, чтобы заполнить его потомки таким образом: "Rubriques" имеет многоСамостоятельные отношения, поэтому одна рубрика может иметь несколько дочерних рубрик

ДЕЙСТВИЯ: 

  actions: {
    get_main_rubriques: ({ commit }) => {
      axios.get('http://localhost:8180/unv-api/rubrique/search/rsql?query=niveau==1')
        .then(resp => {
          let results = resp.data._embedded.rubriques
          results.forEach(element => {
            axios.get('http://localhost:8180/unv-api/rubrique/search/rsql?query=idpere==' + element.id)
              .then((result) => {
                element.childs = result.data._embedded.rubriques
              })
              .catch((err) => {
                console.log(err)
              })
          })
          console.log(results)
          commit('MUTE_MAIN_RUBRIQUES', results)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }

Мутации: 

MUTE_MAIN_RUBRIQUES: (state, rubrique) => {
      state.rubriques = rubrique
    }

APP.VUE 

computed: {
    ...mapState([
      'rubriques'
    ])
  },
  created: function () {
    this.$store.dispatch('get_main_rubriques')
  }

<b-dropdown  v-for="item in rubriques" :key="item.id"  v-bind:text="item.libelle" id="ddown1" class="m-md-1">
       <b-dropdown-item-button v-for="child in item.childs" :key="child.id"  v-bind:text="child.libelle">
         {{ child.id }} - {{ child.libelle }}
       </b-dropdown-item-button>
</b-dropdown>

Проблема в том, что раскрывающиеся списки родителей отображаются без проблем, но дочерние элементы отсутствуют, они не присутствуют в состоянии, либо они присутствуют в console.log(results) до commit в моих действиях.

Я что-то не так делаю?Спасибо.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Основная проблема в том, что вычисляемые свойства не выполняют глубокое наблюдение, см. Трудно вызвать вычисляемое свойство массива

Этот код 

computed: {
  ...mapState([
    'rubriques'
  ])
}

ссылается народительский rubriques массив и отслеживает это, но не дочерние свойства childs.

Когда вы смотрите на консоль, вы можете увидеть маленькое «i» для информации, которая говорит, что значение обновлено «только сейчас»».Это означает, что к тому времени, когда вы смотрите на него, у него уже есть дочерние значения - но это, вероятно, не тот случай, когда запускается commit().

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

Один из способов справиться с этим - добавить глубокий наблюдатель, который использует $forceUpdate() для повторного рендеринга DOM 

watch: {
  rubriques: {
    handler: function (after, before) {
      this.$forceUpdate()
    },
    deep: true,
  }
}

@ Ответ Эфрата, вероятно, лучше - вы бы эффективно подождали все данные о детях, прежде чем отправлять родителей в магазин.Таким образом, у вас есть только одно обновление DOM (и меньше кода).

0 голосов
/ 20 ноября 2018

переместите commit('MUTE_MAIN_RUBRIQUES', results), чтобы сидеть внутри внутреннего блока then, чтобы убедиться, что он будет выполнен после того, как вы получите ответ: 

  actions: {
    get_main_rubriques: ({ commit }) => {
      axios.get('http://localhost:8180/unv-api/rubrique/search/rsql?query=niveau==1')
        .then(resp => {
          let results = resp.data._embedded.rubriques
          results.forEach(element => {
            axios.get('http://localhost:8180/unv-api/rubrique/search/rsql?query=idpere==' + element.id)
              .then((result) => {
                element.childs = result.data._embedded.rubriques;
                console.log(results);
                commit('MUTE_MAIN_RUBRIQUES', results);
              })
              .catch((err) => {
                console.log(err)
              })
          })
        })
        .catch(err => {
          console.log(err)
        })
    }
  }

, чтобы понять, почему он не работает на вашем пути,Узнайте больше о обещаниях и асинхронных операциях.

...