代码之家 › 专栏 › 技术社区 › Cesar

Vuex AXIOS发布阵列更新

vuex axios vue.js javascript

Cesar · 技术社区 · 6 年前

我目前对Vuejs Vuex和AXIOS有问题:

我正在获取一个带有AXIOS的数组--在该数组上循环以这样填充其子数组: “rubriques”有很多自我关系,所以一个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 回复 | 直到 6 年前

Efrat Levitan 6 年前

移动 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 以及异步操作。

Hiram K. Hackenbacker 6 年前

基本的问题是,计算出的属性不会进行深入观察,请参见 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刷新(以及更少的代码)。