一起使用 fetch 和 asyncData

Question

我有疑问..

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

假设：

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

在这个过程的同时，语言值也保存在本地存储中，所以，如果我只使用asyncData，当页面刷新时API调用将不会正确调用保存的语言（asyncData可以'不访问本地存储）。

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

那么我为什么不只使用 fetch 挂钩呢？因为 fetch 比 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 也应该足够了（服务器和客户端都可用）。