Javascript Vuex axios问题阵列更新

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

我得到了一个axios->循环数组的数组，以这种方式填充其子数组： “rubrique”有很多自我关系，因此一个rubrique可以有多个孩子rubrique

行动：

突变：

APP.VUE

计算：{
…地图状态([
“红宝石”
])
},
已创建：函数（）{
此.$store.dispatch（'get_main_rubriques'））
}
{{child.id}}-{{child.libelle}}

问题是：父下拉列表显示时没有任何问题，但子下拉列表不显示，它们也不存在于状态中，但它们存在于我的操作中的

提交之前的
控制台中。日志（结果）

我做错什么了吗？谢谢。
移动
提交（'MUTE_MAIN_RUBRIQUES'，results）
坐在内部
然后
块中，以确保在返回响应后执行：

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

要理解为什么它不能按您的方式工作，请阅读更多关于异步操作和异步操作的信息。
基本问题是计算属性不能进行深入监视，请参阅

此代码

计算：{
…地图状态([
“红宝石”
])
}

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

当您查看控制台时，您可能会看到一个小的“i”表示“刚刚”更新了值。这意味着当您查看它时，它已经有了子值-但是当
commit（）
运行时，情况可能不是这样

因此，家长会被添加，而您的孩子的回迁会继续运行，但会引用他们的家长，因此最终孩子会被正确地添加到存储中

处理它的一种方法是添加一个deep-watcher，它使用
$forceUpdate（）
重新呈现DOM

观察：{
红字：{
处理程序：函数（之后、之前）{
这是。$forceUpdate（）
},
深：是的，
}
}

@Efrat的答案可能更好——在将家长发布到商店之前，您可以有效地等待所有的孩子数据。这样你只需要一次DOM刷新（代码更少）。
你试过Vue.set（state'rubriques'，rubrique）吗？@Darem我试过了是的，也不起作用，state'rubriques'仍然没有孩子。谢谢，效果很好，我创建了一个异步函数，它也可以工作，但我不知道axios在进入之前已经在等待响应了。今天我学到了一些东西。谢谢
MUTE_MAIN_RUBRIQUES: (state, rubrique) => {
      state.rubriques = rubrique
    }

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>

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