Vuex axi에서 어레이 업데이트 발생

Vuex axi에서 어레이 업데이트 발생

나는 현재 VueJS vuex와 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내 행동으로는

내가 뭘 잘못하고 있나요?고마워요.

움직이다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)
        })
    }
  }

왜 당신의 방식대로 작동하지 않는지 이해하려면 약속과 비동기적 운영에 대해 자세히 읽어보십시오.

기본적인 문제는 계산된 속성이 딥 워치를 하지 않는다는 것이다. 어레이의 계산된 속성은 트리거하기 어렵다.

이 코드

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

모체 참조rubriques그것을 배열하고 감시하지만 아동 재산은 보지 않는다.childs.

콘솔을 보면 값이 '바로 지금' 업데이트된다는 정보를 나타내는 작은 'i'가 보일 수 있다.이것은 당신이 그것을 볼 때, 그것은 이미 어린이의 가치를 가지고 있다는 것을 의미한다 - 그러나 그것은 아마도 어린이의 가치관을 가지고 있을 때는 그렇지 않을 것이다.commit()달리다

그래서 부모님들이 추가되고 당신의 자녀들이 계속 뛰지만 부모에 대한 언급이 있기 때문에 결국 아이들은 가게로 정확하게 추가된다.

이를 처리하는 한 가지 방법은 다음과 같은 기능을 사용하는 심층 감시자를 추가하는 것이다.$forceUpdate()DOM을 다시 렌더링하다

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

@Efrat의 대답은 아마도 더 나을 것이다 - 당신은 부모를 상점에 올리기 전에 모든 아동 데이터를 효과적으로 기다릴 것이다.이렇게 하면 DOM 새로 고침(코드 수 감소)이 한 개뿐입니다.

참조URL: https://stackoverflow.com/questions/53393533/vuex-axios-issue-array-updates