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/mountedでデータを取得するため、操作は非常に簡単です

ready() { // vue2 为 mounted() {
  var request = $.ajax({
    type: "POST",
    dataType: 'json',
    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
      })
    })
  }
}

関連する推奨事項:

簡単な vuex とモジュール化を学ぶ

Vuex改善学習共有

Vuexのファミリーバケットステータス管理について

以上がvm.$nextTick インスタンスを使用した Vue + Vuex の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。