让同位素等待 api 数据加载 - nuxt js

Question

我是运行一个显示来自 wordpress 数据的 nuxtjs 应用程序。在我的项目概览页面上，我希望将不同项目的图像显示为具有同位素和过滤功能的砌体。当我在 root 上打开网站并导航到项目页面 (/project) 时，一切都正确显示。当我重新加载页面或手动输入 URL 时，布局崩溃了。经过一些错误处理后，我发现在页面上重新加载同位素想要对卸载的项目数据进行布局。在页面上输入 - “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(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");
           
           if(this.projects.length != 0){
               console.log("projekte geladen!")
               let iso = new Isotope('.items', {
               itemSelector: '.item',
               masonry: {
                   columnWidth: '.grid-sizer'
               }
           });
            imagesLoaded(".items").on( 'progress', function() {
                // layout Isotope after each image loads
                console.log("each image loaded");
                iso.layout();
            });
                
           }else{
               console.log("keine projekte");
           }
            
               
       },
       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").addClass("btn-primary");
           oldActive.removeClass("btn-primary").addClass("btn-default");
           iso.arrange({filter: `.${selector}`});
       }
   }
}
</script>

所以在重新加载函数 this.isotope() 之前，我相信从计算加载的 projects() 加载。如果这是真正的问题，我如何在加载项目时完成同位素加载...

Answer 1

在您的情况下，当在 created() 挂钩中调度操作时，操作刚刚开始，但您不知道它们何时完成，其余代码继续执行。换句话说，在调用 this.isotope() 时，您的项目还没有在商店中。

由于您使用的是 Nuxt，最好的方法可能是使用 asyncData 挂钩。使用它，在第一次加载（刷新页面，或手动输入 url ）时，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')
  commit('SET_PROJECTS', projects)
}

让同位素等待 api 数据加载 - nuxt js

Make isotope wait till api data is loaded - nuxt js

json

wordpress

asynchronous

nuxt.js

jquery-isotope