在 Vue 应用程序中为授权用户获取数据的最佳位置？

Question

您好，我正在从我的 Home.vue 中的快递 API 中获取一个 post 的数组，该 Home.vue 受到路由守卫的保护。

<script>
export default {
  created() {
    this.$store.dispatch('fetchPosts')
  }
}
</script>

fetchPosts 操作：

async fetchPosts(context) {
  try {
    const res = await api.get('/posts', {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    })
    context.commit('SET_POSTS', res.data)
    context.commit('SET_ERROR', null)
  } catch(err) {
    console.log(err.response.data)
    context.commit('SET_ERROR', err.response.data)
  }
}

在我的操作中，我提交了一个更改，将 posts 对象设置为 res.data。我只想在用户登录时获取帖子，因为当用户添加 post 时，我有一个将 post 添加到数据库并更新 posts 状态的突变。但是因为我路由回主屏幕，这导致 created() 挂钩再次指向运行，重新获取每个 post 请求的数据。应用程序当然可以正常工作，但可以更有效率。我可以做些什么来解决更好地增强我的应用程序？

Answer 1

您可以检查您是否还没有填充状态。
如果它是空的，则进行 API 调用，否则什么也不做。

有守卫是好事。根据您的应用程序和您想要处理授权用户的方式，您还可以将全局中间件连接到您的路由器。这将添加更多通用代码并可用于多个地方，因此更少 errors/duplication.

这是一篇关于此的有趣文章：https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/

您的其余代码看起来不错！

在 Vue 应用程序中为授权用户获取数据的最佳位置？

Best place to fetch data for authed users in Vue app?

javascript

vue.js

vuex