vuex的dom更新回调问题

Question

根据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);
});

Answer 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()
        })
      }
    }

vuex的dom更新回调问题

1个回答