vue.js - 如何使用 Nuxt 访问 asyncData 中的数据

Question

我正在尝试使用 Nuxt 构建服务器端可排序表，并且我希望能够在我的 Vue data 中指定默认排序列和方向，并在我的 asyncData 中访问它功能。像这样的东西:

<script>
export default {
  async asyncData ({ $axios, params }) {
    const things = await $axios.$get(`/api/things`, {
      params: {
        sort_column: this.sortColumn,
        sort_ascending: this.sortAscending,
      }
    });
    return { things };
  },
  data () {
    return {
      sortColumn: 'created_at',
      sortAscending: true
    }
  },
  // ...
}
</script>

但似乎 data尚不可用，如 this.sortColumn和 this.sortAscending没有定义。我如何在 asyncData 时访问这些默认值运行同时还允许在用户与页面交互时更改它们。 (或者，有什么更好的方法来构建它？)

注意:这个问题被问到 here ，但接受的答案与这种情况无关。

Answer 1

您可以将其全部返回到 asyncData 中。例如。像这样:

async asyncData ({ $axios, params }) {
    const sortColumn = 'created_at'
    const sortAscending = true
    const things = await $axios.$get(`/api/things`, {
      params: {
        sort_column: sortColumn,
        sort_ascending: this.sortAscending,
      }
    });
    return { things, sortColumn, sortAscending };
  },

它会像你想要的那样表现。