重用相同的视图和逻辑只是改变 VUE 中的端点

Question

我到了一个地步，我有一堆行为相同的端点：

http:://api.development/projects/status/types

http:://api.development/projects/errors/types

http:://api.development/projects/priority/types

它们都有相同的动词：GET、POST（添加）、PUT（编辑）和 DELETE，它们共享相同的数据结构：

{
    name: "",
    description: ""
}

因此，在我的客户端上管理它的视图和逻辑将是相同的。

我正在为客户端使用VUE。我想创建一个组件来重用视图并创建三个包含该组件的其他组件。因此逻辑将写在所有这三个父组件中。

但是我如何实现在它们之间重用它的逻辑？唯一会更改的代码是端点。

Answer 1

你的意思是 mixins?

Answer 2

您可以创建一个服务文件，并在其中声明您的 API 调用，然后将该文件导出为一个组件并在您的应用程序的任何位置重复使用这些调用。

看起来像这样：

import axios from 'axios'
const api = 'API'

export default {
  data() {
    return {
      user: `${api}/some/route`,
      hotels: `${api}/other/route/`
    }
  },
  methods: {
    getHeaders() {
      return {
        headers: {
          Authorization: 'Bearer ' + 'TOKEN',
          'Content-Type': 'application/json'
        }
      }
    },
    getModule(route, cb) {
      axios
        .get(route, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(err => {
          cb(err)
        })
    },
    postModule(route, data, cb) {
      axios
        .post(route, data, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(e => {
          cb(e)
        })
    },
    putModule(route, data, cb) {
      axios
        .put(route, data, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(e => {
          console.log(e)
        })
    },
    deleteModule(route, id, cb) {
      axios
        .delete(route + id, this.getHeaders())
        .then(response => {
          cb(response.data)
        })
        .catch(e => {
          console.log(e)
        })
    }
  }
}

在您要执行调用的组件中，您可以这样做：

import ServiceFileName from '@/services/YourServiceFileName'

methods:{
getData () {
      Main.methods.getModule(Main.data().hotels, data => {
        console.log(data)
      })
    }
}

重用相同的视图和逻辑只是改变 VUE 中的端点

Reuse same view and logic just change the endpoints in VUE

javascript

vue.js

code-reuse