从asyncData中访问组件方法 - nuxtjs

Question

我是使用nuxtjs，并且我正在尝试弄清楚是否可以从async data函数中访问组件方法。

例如，我想做这样的事情：

methods: {
    parseResult(data) {
        // do somthing with data...
    }
},

async asyncData({ app }) {
    const { data } = await app.$axios.get('/some/api')
    return app.parseResult(data)
},

- Elon Salfati

Answer 1

你不能。在文档中已经说明。

在asyncData内部，this不会访问到组件实例，因为它在组件初始化之前被调用。

您可以将方法移动到vuex store中，并从asyncdata中调用它。

- Aldarund

---

如果该方法根本不需要访问组件，您也可以将其简单地移动到Vue组件之外（就在其上方），并像普通JS函数一样调用它。 - fredrivett

@fredrivett 谢谢你的评论！ - undefined

Answer 2

正如评论中fredrivett指出的那样，您可以将解析函数移动到export default区域之外，以便在asyncData中使用它作为普通的js函数：

<script>

let parseResult = (data) => {
        // do somthing with data...
    }

export default {
  async asyncData({ app }) {
    const { data } = await app.$axios.get('/some/api')
    return parseResult(data)
  },
}

</script>

- Kenny Aires

Answer 3

我通常会将asyncData()更改为fetch()，这样就可以正常工作了。

- Maurilio Atila