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

我正在尝试使用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，但是被接受的答案与这种情况无关。

最佳答案

您可以将其全部返回到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 };
  },

它的行为将像您想要的。