我正在将 nuxt.js 用于我的前端应用程序。我目前遇到一个问题，asyncData尤其是第一次运行时（在服务器上）。

在构建我的应用程序（$ nuxt build并通过 提供服务$ serve）时，我目前无法真正从服务器上运行的代码中 console.log 输出一些信息。在我的客户端上运行代码之前，如何调试该部分？

这是一种方法吗： https ://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f 所以我会手动启动 nuxtnode.js并尝试检查那里的东西？

或者，还有更好的方法？nuxt 构建属性（https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin）仅用于分析构建，对吗？像包大小等，而不是在服务器上运行的实际代码？

我希望我能弄清楚我在寻找什么，如果没有，我很乐意回答进一步的问题。任何提示都非常受欢迎。先感谢您。

干杯

我正在使用 nuxtjs 在服务器上渲染我的页面。使用 asyncdata 在我的页面中加载数据是没有问题的，但是如何在包括页眉和页脚的默认布局中加载数据？因为 asyncdata 在那里不可用。我应该在商店内使用 nuxtServerInit 还是还有其他方法？

格雷戈尔

当我使用 $router.push 添加新查询来路由 Nuxt watchQuery 不起作用并且 asyncData 不获取 api 并重新挂载子组件时。请注意“新查询”，默认情况下不存在任何查询。（创建新查询然后存在查询后，一切都是正确的，并且 watchQuery 工作正常。）

example.com/some-param ----> example.com/some-param?brand=x （不工作 watchQuery）

example.com/some-param?brand=x ----> example.com/some-param（正确的 watchQuery）

change_brand: function () {
  const vm = this;
  /*** selected_brands = [] is an array defined in data ***/
  let q = { ...vm.$route.query };
  if (vm.selected_brands.length > 0) {
    q.brands = vm.selected_brands.join("-");
  } else {
    delete q.brands;
  }
  vm.$router.push({
    name: "search-slug",
    params: vm.$route.params,
    query: q,
  });
},

我可以asyncData()使用 Nuxt.js从页面组件的方法中调用 mixin 函数吗？

我的代码：

<template>
  ...
</template>
<script>
   import api from "@/plugins/api/api.js"

   ...

   export default {

      ...

      async asyncData(context) {
          ...
          context.apiMethodName()
          ...
      }

      ...
   }

   ...
</script>

api.js

import Vue from 'vue'
import API from '@/assets/js/api'

Vue.mixin({
  methods: {
    apiMethodName() { ... }
  }
})

我如何asyncData在布局或组件中使用（显然是禁止的）？

因为我的侧边栏组件用于默认布局，我需要使用它asyncData来显示来自后端的数据。如果我使用 Vuex 来获取数据......我不知道如何在每个页面上使用 global 来获取它。

我的布局组件注释：

  @Component({
    components: {
      LeftDrawer
    },
    async asyncData({ app }) {
      const latestPosts = await app.$axios.get(`/posts/latest`);

      return {
        latestPosts: latestPosts.data,
      };
    }
  })

我尝试获取 URL 中 name 参数的值：http://fakelocalhost:3000/page?name=test

我正在使用NuxtJS (v2.11.0) 和TypeScript，以及nuxt-property-decorator包 (v2.5.0)。

但是，我得到了一个未定义的结果console.log(params.name)。

在这里，我的完整 TS 代码：

<script lang="ts">
  import {
    Component,
    Vue
  } from "nuxt-property-decorator";

  @Component({
    asyncData({ params  }) {
      console.log(params.name);
    }
  })
  export default class extends Vue {}
</script>