vm.$nextTick 인스턴스를 사용한 Vue + Vuex에 대한 자세한 설명

이 글은 주로 Vue + Vuex에서 vm.$nextTick을 사용하는 방법에 대한 자세한 설명을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

vm.$nextTick

간단히 말하면, DOM은 최소한 현재 틱의 모든 코드가 실행된 후에 업데이트되기 때문입니다. 따라서 데이터가 수정되고 DOM이 업데이트된 후에는 실행이 불가능합니다. DOM이 업데이트된 후 특정 코드가 실행되도록 하려면 이 코드를 setTimeout과 같은 다음 이벤트 루프에 배치해야 합니다. (fn, 0) 이렇게 하면 DOM이 업데이트된 후 이 코드가 즉시 실행됩니다.

//改变数据 
vm.message = 'changed' 
 
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新 
console.log(vm.$el.textContent) // 并不会得到'changed' 
 
//这样可以，nextTick里面的代码会在DOM更新后执行 
Vue.nextTick(function(){ 
  console.log(vm.$el.textContent) //可以得到'changed' 
})

vm.$nextTick은 다음 DOM 업데이트 주기까지 콜백 실행을 지연하는 데 사용됩니다.

일반적으로 Ready/Mouned에서 데이터를 얻으면 작업이 매우 간단합니다.

ready() { // vue2 为 mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    url: "api.php"
  });
  request.then((json) => {
    // balabala
    this.$nextTick(function () {
      // balabala
    })
  });
}

vuex를 사용하는 경우 vuex의 데이터 작업은 모두 Action 및 Mutation이므로 Ready/Mounted에서 작업을 호출하세요. 함수, 그렇다면 이때는 어떻게 vm.$nextTick을 사용하나요?

이때 Promise를 사용해야 합니다. 구체적인 코드는 다음과 같습니다.

홈페이지는 api.js

export default {
  getFromConfig(config) {
    return $.ajax({ data: config })
  }
}

그다음 액션입니다. js

export const getArticleList = ({dispatch}, config) => {
  return api.getFromConfig(config).then(({data}) => {
    dispatch(types.RECEIVE_ARTICLE, data, config.page)
  })
}

a는 여기에 반환을 추가하여 약속 대상을 반환 할 수 있도록 vue 구성 요소를 반환 할 수 있도록 vue 구성 요소

methods: {
  loadMore(page = this.page) {
    var id = this.$route.params.id || ""
    Promise.all([
      this.getArticleList({
        id: id,
        page: page
      })
    ]).then(() => {
      this.$nextTick(function () {
        // balabala
      })
    })
  }
}

related 권장 사항을 반환 할 수 있습니다.

Vuex 개선 학습 공유

Vuex 제품군 버킷 상태 관리 정보

위 내용은 vm.$nextTick 인스턴스를 사용한 Vue + Vuex에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!