Question

我目前在VueJS vuex和Axios上遇到问题：

我正在使用axios获取一个数组->在该数组上循环以这种方式填充其子对象： “ Rubriques”具有很多自我关系，因此一个Rubrique可以拥有多个子Rubrique

操作：

  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中存在。 / p>

我做错什么了吗？谢谢。

Answer 1

将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)
        })
    }
  }

要了解其为何无法按您的方式工作，请详细了解promises和异步操作。

Answer 2

基本问题是计算的属性不会进行深度监视，请参阅computed property of array is difficult to trigger

此代码

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

引用父rubriques数组并监视它，但不监视子属性childs。

当您查看控制台时，您可能会看到一个小的“ i”信息，该信息表明值已“立即更新”。这意味着，当您查看它时，它已经具有子值-但是运行commit()时可能不是这种情况。

因此，父母被添加了，并且您的孩子的取物继续运行，但是对父母有参考，因此最终孩子被正确地添加到了商店中。

一种解决方法是添加一个深度监视程序，该监视程序使用$forceUpdate()重新呈现DOM

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

@Efrat的答案可能更好-您可以有效地等待所有子数据，然后再将父母发布到商店。这样一来，您只需刷新一次DOM（并减少代码）。

Vuex axios问题阵列更新

2 个答案: