具体场景:
当vue中使用swiper, better-scroll时候,我们需要去new Swiper,new [better-scroll]来获取实例,通常我们页面的数据都是异步获取的,
会导致我们创建Swiper或者better-scroll实例时,数据还没有更新,DOM也没更新,会造成我们不想要的效果.
所以我们需要在 数据更新之后,DOM也更新了,然后再创建我们的Swiper,better-scroll
解决方案
- 使用watch + $nextTick
watch监听数据的变化,$nextTick下次DOM更新循环之后来调用,当数据修改之后立即调用它,然后等待DOM更新
使用callback(回调函数)
一般获取数据都是在vuex中的action中调用ajax异步获取的,所以我们可以在分发action的时候传给action回调函数.
当action中获取到数据并且提交mutation之后,调用回调函数
action中
getGoods({commit}, callback){
// 异步获取数据
getGoods().then(result => {
if(result.code === 0){
commit('[mutation]', {goods: result.data});
// 当数据更新之后,通知数据更新了
// 如果传过来callback就调用，否则不调用
callback && callback();
}
});
},
vue实例中
// 分发action
this.$store.dispatch('getGoods', () => {
this.$nextTick(() => {
// $nextTick回调里面的this自动绑定到调用$nextTick的实例上
// 要在数据更新之后,列表显示后,创建想要的对象
// 例如swiper或者better-scroll
});
});
