ホームページ > 記事 > ウェブフロントエンド > 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 }) }) } }
関連する推奨事項:
以上がvm.$nextTick インスタンスを使用した Vue + Vuex の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。