一起使用fetch和asyncData

Question

我有疑问..。

在我的Nuxt静态项目页面(Nuxt版本=> 2.12)中，我需要快速恢复数据。

假设：

使用asyncData，可以检查速度的目标，因为使用asyncData，我可以在组件呈现过程中获取数据。但是这个项目有3个不同的API调用，和我设置的语言一样多，当我选择一种语言时，值会保存在Vuex存储中。

在此过程的同时，语言值也保存在本地存储中，因此，如果我只使用asyncData，当页面被刷新时，API调用将不是使用保存的语言进行的正确调用(asyncData无法访问本地存储)。

在这里，提取钩子进入游戏，将手表设置在存储的状态语言值上，它可以触发获取并获得正确的数据。此外，即使页面被刷新，提取钩子，能够读取本地存储的值，也可以完成它的工作。

那我为什么不只用那个取货钩呢？因为提取速度比asyncData慢。

问题如下：

使用fetch和asyncData是一种反模式吗？

有更好的办法吗？

这里我的代码：

export default {
  asyncData (context) {
    const slug = (context.route.path === '/' || context.route.path === '') ? '/home' : context.route.path
    return context.app.$storyapi
      .get(`cdn/stories${slug}`, {
        language: context.store.state.language.language
      }).then((res) => {
        return res.data
      }).catch((res) => {
        context.$errorMessage(res.response,
          'Sorry but this content doesn\'t extist', `Sorry, but the content called: "${context.route.name}" has a problem or doesn't exist`
        )
      })
  },
  data () {
    return {
      story: {
        content: {}
      }
    }
  },
  async fetch () {
    const slug = (this.$route.path === '/' || this.$route.path === '') ? '/home' : this.$route.path
    const { data } = await this.$storyapi.get(`cdn/stories${slug}`, {
      language: this.$store.state.language.language
    })
    this.story = data.story
  },
  watch: {
    '$store.state.language.language': '$fetch'
  }
}

为了完成这些信息，我想进一步说，代码工作得很好，问题是最佳实践。

Answer 1

从什么时候起fetch()比asyncData()慢

另外，如果你真的需要重新运行一些东西，你可以完全use await this.$nuxt.refresh()。

您可能可以运行这两个，但他们可以做一些相同的事情，所以这有点重复，我建议只选择一个。

我不确定它在localStorage中如何定位是一个问题，但您可能可以使用其中一个可用的包来对此数据进行通用存储，例如：https://github.com/unjs/unstorage

如果没有，cookie也应该足够了(在服务器和客户端都可用)。