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

Question

我正在运行一个 nuxtjs 应用程序，它显示来自 wordpress 的数据。在我的项目概述页面上，我希望将不同项目的图像显示为带有同位素和过滤的砖石。当我在根目录下打开网站并导航到项目页面（/项目）时，一切都正确显示。当我手动重新加载页面或输入 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。

另一种选择是使用异步/等待。你可以看看here 的样子。你可能会得到这样的结果：

beforeMount() {
    this.$store.dispatch('getPages');
    this.$store.dispatch('getProjects');
},

store 中的 getPages 和 getProjects 函数在哪里使用 async/await

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