在mounted 中发生异步和同步共存的问题

场景 : 在我们进行 vue 的项目，遇到这么一个bug，原因：我们在 mounted 发送了异步请求，并且 new swiper()对象，因为 发送请求是异步操作，而new swiper 是同步操作，数据没有请求回来之前，同步操作就被执行了，所以页面上的轮播图，不会进行轮播了，？？？

解决：子需要让同步代码延迟到数据请求回来，DOM完成更新后，就行了

方式一
但监听到数据变化时，就可以new swiper了，并且使用 vm.$nextTick()

watch: { 
categorys() {
this.$nextTick(() => {
         new Swiper(".swiper-container", {
           loop: true,  循环模式选项
           autoplay: true,
            如果需要分页器
           pagination: {
             el: ".swiper-pagination"
           }
         });
       });
     }
   },

方式二
在进行异步请求事件，传递一个回调函数，在那边判断函数存不存在，存在，就执行函数，此时，数据被请求之后才会去执行同步代码，也使用了vm.$nextTick()

 this.$store.dispatch(ASYNCH_CATEGORYS, () => {  方式二
       this.$nextTick(() => {
         new Swiper(".swiper-container", {
           loop: true,  循环模式选项
           autoplay: true,
            如果需要分页器
           pagination: {
             el: ".swiper-pagination"
           }
         });
       });
     });  

方式三
async + await

 async mounted() { // 方式三
    await this.$store.dispatch(ASYNCH_POSITION); // 获取位置信息
    await this.$store.dispatch(ASYNCH_CATEGORYS);
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination"
        }
      });
    });