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和asyncData之间的区别仅在于：首先返回数据，而第二次不返回。就这样。您可以做其他所有事情。至于不能处理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' })
    })
  }
}

Answer 2

我忽略了一个事实，那就是您可以简单地从行动中兑现承诺。这使我可以在组件中处理404状态，同时将请求保存在商店中。

帖子页

async fetch ({ store, params, error }) {
  await store.dispatch('article/GET', params).catch((e) => {
    error({ statusCode: 404, message: 'Post not found' })
  })
},

存储操作

async GET({commit}, params) {
  return new Promise((resolve, reject) => {
    axios.get('/posts/' params[0).then((res) => {
      let data = res.data
      commit('SET', data)
      resolve()
    }).catch((e) => {
      reject(e)
    })
  })
},

用NuxtJS和Vuex路由404-组件应该调用突变还是动作可以返回承诺？

2 个答案: