Vuex axios 问题数组更新答案

【问题标题】：Vuex axios issue array updatesVuex axios 问题数组更新
【发布时间】：2018-11-20 12:58:38
【问题描述】：

我目前遇到了 VueJS vuex 和 Axios 的问题：

我得到一个带有 axios 的数组 -> 在该数组上循环以这种方式填充它的子元素： “评分表”有很多自我关系，所以一个评分表可以有多个子评分表

动作：

  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 中。

我做错了吗？谢谢。

【问题讨论】：

你试过 Vue.set(state, 'rubriques', rubrique) 吗？
@Darem 我做了，是的，也不起作用，国家“rubriques”仍然没有孩子

标签： javascript vue.js axios vuex

【解决方案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 和异步操作的信息。

【讨论】：

好的，谢谢它运行良好，我创建了一个异步函数，它也可以运行，但我不知道 axios 在输入 .then 之前已经在等待响应。我今天学到了一些东西。谢谢！

【解决方案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（并且代码更少）。

【讨论】：