为Nuxt.js编写客户端API库

这更多是一个体系结构/设计问题，而不是“为什么不起作用”。

我正在编写一个由外部API（ExpressJS）驱动的Nuxt.js SSR Web应用程序。API负责身份验证（通过nuxt-auth-JWT）和检索用户数据等。据我所知，SSR代码代表客户端在客户端上设置Cookie并使用它来检索JWT以向API服务器进行身份验证浏览器。

我为数据库中的每个模型编写了一些辅助方法，如下所示（简化）：

// services/UserService.js
export default class UserService {
  constructor(ctx) {
    this.$axios = ctx.$axios
  }

  getUsers () {
    return this.$axios.get('/api/users')
  }

  createUser (params) {
    return this.$axios.post('/api/users', params)
  }

  updateUser (params) {
    return this.$axios.put('/api/users/' + params.id, params)
  }

  getUser (id) {
    return this.$axios.get('/api/users/' + id)
  }
}

这对于SSR非常有效，因为我可以在Nuxt页面中执行此操作：

<template>{{user.display_name}}</template>

<script>
import UserService from '@/services/UserService'

export default {
  asyncData ({ params, $axios }) {
    const api = new ApiService({ $axios })

    return api.Users.getUser(params).then(user => {
      return { user, api } // this makes them available in the vue instance
    })
  }
}
</script>

现在，将其呈现并发送到浏览器后，下面可能会有一个反应式表单。当用户提交该表单以更新其个人资料时，我突然无法访问该UserService实例。

这是因为它是在asyncData调用内部定义的，只能在SSR上下文中使用。

我通过api从asyncData方法以及返回来修复了此问题user，然后Nuxt将其放到vue实例中。但是，这感觉很不对劲。这是正确的方法吗？你应该怎么做？还是不是

因为Vue会监视in中的所有内容，所以这感觉特别糟糕data，我真的不需要它来跟踪api实例...

我是Vue和Nuxt的新手，所以如果我忽略了某些内容，请说，但是我的问题是：

我应该如何设计使其在SSR上下文和浏览器中都能使用？

谢谢！