vuex的dom更新回调问题

https://segmentfault.com/q/1010000007359564

根据vue的响应式原理,多次的数据操作之后进行一次的dom更新,所以可以使用$nextTick在dom更新后做些什么。

但是今天我使用了vuex来管理应用状态,我在组件中发了一个dispatch来触发某个action,action又触发mutations来改变状态,但是在vuex中没有nextTick这个东西,我无法在dom更新后做些什么

在组件写的nextTick也不是在vuex更新状态后触发的,而是在组件自身的dom更新后触发,现在也想不出个办法,求各位大神帮帮忙

this.$store.dispatch("action",{
    name: "test",
    type: "add"
});
this.$nextTick(() => {
    //vuex改变状态后的dom还没有更新就执行到这里了
    $(".slimscroll-render").eq(index).slimScroll();
    $.fn.fullpage.setAllowScrolling(false);
});

默认排序时间排序

1个回答

答案对人有帮助,有参考价值1答案没帮助,是错误的答案,答非所问

我也遇到这个问题了,由于后台请求是异步的,所以$.nextTick 并不能正确更新, 我最后的解决办法是通过watch 来实现的,

watch: {
      itemList: function (val, oldVal) {
        console.log(val)
        console.log(oldVal)

        this.$nextTick(() => {
          const ms = this.$refs.grid.masonry
          ms.reloadItems()
          ms.layout()
        })
      }
    }
时间: 2024-10-10 06:31:57

vuex的dom更新回调问题的相关文章

Vue.nextTick DOM 更新循环结束之后执行延迟回调

在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新. 知乎上的例子 //改变数据 vm.message = 'changed' //想要立即使用更新后的DOM.这样不行,因为设置message后DOM还没有更新 console.log(vm.$el.textContent) // 并不会得到'changed' //这样可以,nextT

vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制

一.定义[nextTick.事件循环] nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新. nextTick的触发时机: 在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调. 应用场景: 需要在视图更新之后,基于新的视图进行操作. 以上出现了事件循环的概念,其涉及到JS的运行机制,包括主线程的执行栈.异步队列.异步API.事件循环的协

OSG程序设计之更新回调

更新回调(Update Callback)涉及到一个类:osg::NodeCallback.这个类重载了函数调用操作符.当回调动作发生时,将会执行这一操作符的内容. 如果节点绑定了更新回调函数,那么在每一帧系统遍历到此节点时,回调函数都会被调用. 下面给出一个例子: #include <osg/io_utils> #include <osg/PositionAttitudeTransform> #include <osgDB/ReadFile> #include <

OSG使用更新回调来更改模型

OSG使用更新回调来更改模型 转自:http://blog.sina.com.cn/s/blog_668aae7801017gl7.html 使用回调类实现对场景图形节点的更新.本节将讲解如何使用回调来实现在每帧的更新遍历(update traversal)中进行节点的更新. 回调概览用户可以使用回调来实现与场景图形的交互.回调可以被理解成是一种用户自定义的函数,根据遍历方式的不同(更新update,拣选cull,绘制draw),回调函数将自动地执行.回调可以与个别的节点或者选定类型(及子类型)

廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.innerHTML = 'ABC'; // <p id="

ref和setState合用时,怎样解决dom无法及时更新:setState是一个异步函数,但是提供了第二个参数,当dom更新完后后执行第二个参数里的内容

原文地址:https://www.cnblogs.com/ladybug7/p/12432483.html

Swiper和Vue配合使用的问题——Vue的异步更新DOM

Swiper是很常用的库,用于实现触摸滑动效果,为了让Swiper生效,需要执行类似下面的代码(摘自Swiper官方示例) var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项,自动滑动 }) 而该代码的执行时机必须在DOM渲染完成之后,因此Swiper的官方文档要求在window.onload或$(document).ready()(使用JQuery或Zepto时)调用. 但显然,这只适用于静态页面. 如果

从Vue.js源码看异步更新DOM策略及nextTick

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/answershuto/learnVue.在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助.可能会有理解存在偏差的地方,欢迎提issue指出,共同学

初识vue 2.0(12):使用$nextTick获取更新后的DOM

Vue 异步执行 DOM 更新. 只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变. 如果同一个 watcher 被多次触发,只会被推入到队列中一次.这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要. 然后,在下一个的事件循环"tick"中,Vue 刷新队列并执行实际 (已去重的) 工作. Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTim