重构 vue2 代码

Question

我想通过将身份验证功能分离到不同的功能来重构我的代码

所以在我目前的登录功能中

  submitdata () {
    this.$axios({
      url: '/oauth/token',
      method: 'post',
      baseURL: 'http://127.0.0.1:8000',
      data: this.login_form
    })
      .then(
        (res) => {
          this.submitted = false
          localStorage.setItem('access_token', res.data.access_token);
          localStorage.setItem('refresh_token', res.data.refresh_token);

          } else {
            this.$swal('Oops...', 'Invalid Login!', 'error')
          }

        },
        (err) => {
          this.submitted = false
          this.$swal('Oops...', 'Invalid Login', 'error')
        }
      )

    return
  },

我想做的是把它外包到一个不同的文件中，所以我创建了一个文件 auth.js

auth.js
import vue from 'vue';

login(){  
  this.$axios({
    url: '/oauth/token',
    method: 'post',
    baseURL: 'http://127.0.0.1:8000',
    data: this.login_form
   }).then()....
 }

现在我只想在我的组件中调用

auth.login.then()...

但现在我无法访问 Vue this.$ 原型

我该怎么办？

Answer 1

我会将axios 放入名为api-client.js 的单独js 模块中。然后，您只需导入该模块即可在代码中的任何位置使用它，并且您不仅限于拥有 Vue 实例，这现在是您的问题。另一件事是在我看来，将 http 客户端与视图实体结合起来并不是一个好的设计。 所以你会有类似的东西（在伪代码中）：

api-client.js

import axios from 'axios'

login(){
   axios.get('url').then...
}

让 api-client 简洁明了。它的任务是only 发出一个 HTTP 请求，没有别的，与视图（Vue）操作无关。

登录表单.vue

import apiClient from '/some/path/api-client'

submitdata() {
   apiClient.login().then...
}