一起使用 fetch 和 asyncData

Question

我有疑问..

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

假设：

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

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

到这里fetch hook进入游戏，watch设置store的state language值，可以触发fetch获取正确的数据。此外，即使页面刷新，fetch hook 也可以读取本地存储的值，可以很好地发挥作用。

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

一起使用 fetch 和 asyncData

Use fetch and asyncData together

hook

fetch

vue.js

nuxt.js

asyncdata

假设：

问题：