讓同位素等待到api資料加載完畢-nuxtjs

我正在運行一個nuxtjs應用程式，它顯示來自wordpress的資料。在我的專案概覽頁面上，我希望將不同專案的影像顯示為磚石，并帶有同位素和過濾功能。當我在根目錄下打開網站并導航到專案頁面（/project）時，一切都顯示正確。當我重新加載頁面或手動輸入URL時，布局就崩潰了。經過一些錯誤處理，我發現在重新加載頁面時，isotope想要布局未加載的專案資料。 在進入頁面時 - "projekte geladen." 在重新加載/手動 - "keine projekte".

代碼：

<script>。
/* eslint-disable */
let Isotope;
let imagesLoaded;
        if (process.client) {
            Isotope = require('isotope-layout') 。
            imagesLoaded = require('imagesloaded')
        }

export default {
    mounted（） {
        this.isCaseStudy（）。
        this.isotope（）。
    },
   computed: {
       page（）{
           //return this.$store.getters.filterProject; 
           return this.pages。 find(span class="hljs-params">page => page.id ==110)
       },
       pages（）{
           return this.$store.state.pages;
       },
       projects（）{
           return this.$store.state.projects;
       },
   },
   created（）{
       this.$store.dispatch（"getPages"）。
       this.$store.dispatch（"getProjects"）。
   },
   methods: {
       isCaseStudy（）{
           $(".item").each(function(){
               $(this).has('img. case-studyImg'）.addClass（'case-study'）。
           });
       },
       isotope（） {
           console.log("isotope wird ausgeführt"/span>)。
           
           if(this.projects.length !=0){
               console.log("projekte geladen!" )
               let iso = new Isotope(' .items', {
               itemSelector: '.item',
               磚石: {
                   columnWidth: '.grid-sizer'。
               }
           });
            imagesLoaded(".items") 。 on( 'progress' , function() {
                ///在每個圖片加載后布局Isotope。
                console.log("each image loaded")。
                iso.layout()。
            });
                
           }else{
               console.log("keine projekte"/span>)。
           }
            
               
       },
       filterItems(selector) {
           let oldActive = $(".filters .btn-primary").first() 。
            console.log（oldActive）。
           if(oldActive.hasClass(selector)){
               return;
           }

           let currentActive = $(".filters a."   selector).first() 。

           console.log（currentActive）。
           currentActive.removeClass("btn-default"/span>).addClass("btn-primary"/span>)
           oldActive.removeClass("btn-primary"/span>).addClass("btn-default"/span>)。
           iso.arrange({filter: `.${selector}`}）。)
       }
   }
}
</script> 

因此，在重新加載函式this.isotope()之前，從計算加載projects()，我相信。 如果這才是真正的問題，我怎樣才能做到在專案加載時加載同位素呢？

uj5u.com熱心網友回復：

在你的例子中，當在created()鉤子中調度動作時，動作剛剛開始，但你不知道它們何時結束，其余的代碼一直在執行。換句話說，當this.isotope()被呼叫時，你的專案還沒有進入商店。

既然你使用的是Nuxt，最好的方法可能是使用asyncData鉤子。使用它，在第一次加載時（重繪 頁面，或手動輸入網址），asyncData里面的代碼將在服務器上執行，所以你可以確保組件在渲染前擁有API資料。這也是一個更快的方法，因為你利用的是內置的nuxt SSR。

另一個選擇是使用async/await。您可以看看這里會是什么樣子。你最終可能會得到這樣的結果：

beforeMount（） {
    this.$store.dispatch（'getPages'）。
    this.$store.dispatch（'getProjects'）。
},

其中商店中的getPages和getProjects函式使用async/await

async getProjects（vuexContext） {
  const projects = await this.$axios.$get('http://yourapi.com/projects'/span>)
  commit('SET_PROJECTS', projects)
}

標籤：

上一篇：如何在執行依賴setState值的下一步之前等待setState的到來

下一篇：異步和同步函式的行為在一個封鎖線上