vm.$nextTick インスタンスを使用した Vue + Vuex の詳細説明-jsチュートリアル-php.cn

vm.$nextTick インスタンスを使用した Vue + Vuex の詳細説明

小云云

リリース： 2018-01-16 10:24:52

オリジナル

2276 人が閲覧しました

この記事では主に Vue + Vuex での vm.$nextTick の使い方の詳細な説明を紹介していますが、編集者が非常に優れていると感じたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

vm.$nextTick

簡単に言えば、現在のティック内のすべてのコードが実行された後に DOM が少なくとも更新されるからです。したがって、データが変更され、DOM が更新された後に実行することはできません。DOM の更新後に特定のコードが確実に実行されるようにするには、このコードを次のイベントループ (setTimeout など) に配置する必要があります。 (fn, 0), このように、DOM が更新された後、このコードはすぐに実行されます。

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

ログイン後にコピー

vm.$nextTick は、次の DOM 更新サイクルまでコールバックの実行を遅らせるために使用されます。

通常はready/mountedでデータを取得するため、操作は非常に簡単です

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

ログイン後にコピー

vuexを使用している場合、vuexのデータ操作はすべてアクションとミューテーションで行われるため、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)
  })
}

ログイン後にコピー

Promise オブジェクトを返せるように、必ず return をここに追加してください

最後に、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
      })
    })
  }
}

ログイン後にコピー