javascript - 使用 NuxtJS 和 Vuex 路由 404 - 组件应该调用突变还是操作可以返回 promise ？

Question

我正在尝试弄清楚如何在 NuxtJS 中处理路由的外部验证。

假设我有一个动态加载的帖子页面

{ path: '/posts/:id?', name: 'posts-id', component: Post }

然后，为了检查是否存在具有给定 id 的实际帖子，我需要调用 API 并获取帖子或处理 404。

AsyncData 通过下面的示例为我提供了这种可能性

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

但是，它设置了组件上的数据，但我希望将其设置在我的 Vuex 存储中。这是通过将 asyncData 更改为 fetch 并允许我直接变异和调用操作来解决的。直接变异是错误的，但如果我使用操作，我无法处理 404 错误。

那么我该如何去做呢？

Answer 1

据我所知，asyncData 和 fetch 之间的区别仅在于，首先返回数据，而第二次则不返回数据。就这样。你可以做所有其他事情。至于无法处理 404 - 不确定你有什么问题。但这样的事情会起作用

export default {
  fetch ({ params, error, store }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      store.dispatch('yourAction',  { title: res.data.title } )
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}