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

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

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

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

然后，为了检查是否有具有给定id的实际post，我需要调用我的API并获取post或处理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错误

---

那么我该怎么做呢？

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' })
    })
  }
}

---

我忽略了一个事实，即你可以简单地从行动中回报一个承诺。这使我能够处理组件本身中的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)
    })
  })
},