Javascript 重用相同的视图和逻辑—只需更改VUE中的端点即可

我得到了一个点，我有一堆端点，它们的行为类似于：

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。我考虑创建一个组件来重用视图，并创建包含该组件的其他三个组件。因此，逻辑将写入这三个父组件中

---

但是我如何实现逻辑以跨它们重用它呢？唯一会更改的代码将是端点。

您的意思是类似于？

您的意思是类似于？

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

它看起来像这样：

从“axios”导入axios
常量api='api'
导出默认值{
数据（）{
返回{
用户：`${api}/some/route`，
酒店：`${api}/其他/路线/`
}
},
方法：{
getHeaders（）{
返回{
标题：{
授权：'承载'+'令牌'，
“内容类型”：“应用程序/json”
}
}
},
getModule（路由，cb）{
axios
.get（路由，this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（错误=>{
cb（err）
})
},
后模块（路由、数据、cb）{
axios
.post（路由、数据、this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（e=>{
cb（e）
})
},
PUT模块（路由、数据、cb）{
axios
.put（路由、数据、this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（e=>{
控制台日志（e）
})
},
删除模块（路由、id、cb）{
axios
.delete（route+id，this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（e=>{
控制台日志（e）
})
}
}
}

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

它看起来像这样：

从“axios”导入axios
常量api='api'
导出默认值{
数据（）{
返回{
用户：`${api}/some/route`，
酒店：`${api}/其他/路线/`
}
},
方法：{
getHeaders（）{
返回{
标题：{
授权：'承载'+'令牌'，
“内容类型”：“应用程序/json”
}
}
},
getModule（路由，cb）{
axios
.get（路由，this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（错误=>{
cb（err）
})
},
后模块（路由、数据、cb）{
axios
.post（路由、数据、this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（e=>{
cb（e）
})
},
PUT模块（路由、数据、cb）{
axios
.put（路由、数据、this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（e=>{
控制台日志（e）
})
},
删除模块（路由、id、cb）{
axios
.delete（route+id，this.getHeaders（））
。然后（响应=>{
cb（响应数据）
})
.catch（e=>{
控制台日志（e）
})
}
}
}

如果只有一个组件，您计划如何实现该逻辑，如果您想通过传递道具重用该逻辑，您希望遇到哪些障碍？不确定你的实际困难是什么。如果只有一个组件，你打算如何实现逻辑，如果你想通过传递道具重用逻辑，你预计会遇到什么障碍？不确定你的实际困难是什么。