https://github.com/markthree/tob-use-wrap
可以将通用的 uniapp-api 转换为 composition-api 的工具
https://github.com/markthree/tob-use-wrap
composition-api uniapp vue
Last synced: 10 days ago
JSON representation
可以将通用的 uniapp-api 转换为 composition-api 的工具
- Host: GitHub
- URL: https://github.com/markthree/tob-use-wrap
- Owner: markthree
- License: mit
- Created: 2022-01-24T12:13:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T08:52:06.000Z (about 2 years ago)
- Last Synced: 2025-02-14T01:47:51.417Z (about 1 year ago)
- Topics: composition-api, uniapp, vue
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# tob-use-wrap
可以将通用的 `uniapp-api` 转换为 `composition-api` 的工具
## 动机 🐗
在开发过程中，`uniapp-api` 的回调形式在 `vue3` 可以用更加简洁的方式来表达，同时赋予更灵活的操作。
## 规则 🦕
只要需要 `success`, `fail`, `complete` 的 `uniapp-api` 就可以转换为更简单的 `composition-api`。
- `success` 的结果会被设置到 `result.value`
- `fail` 的结果会被设置到 `error.value`
- 函数的执行加载状态将被设置到 `loading.vue`
例如 `uni.request`
```js
// 原生
uni.request({
url: '...',
data: {
name: '张三',
age: 18
},
success(data) {
console.log(data) // 数据
},
fail(error) {
console.log(error) // 错误
},
complete() {
console.log(false) // loading 结束
}
})
// 现在
const { result, error, loading } = useRequest({
url: '...',
data: {
name: '张三',
age: 18
}
})
```
## 例子 🐸
### 1. useRequest
```js
// composables/request.js
import { $U } from "@/uni_modules/tob-use-wrap/index.js"
export const useRequest = $U(uni.request)
```
```html
数据结果: {{result}}
加载状态: {{loading}}
错误信息: {{error}}
import { useRequest } from "@/composables/request.js"
export default {
setup() {
const { result, loading, error } = useRequest({
url: '...',
data: {
age: 18,
name: '张三'
}
})
return {
result, // 数据结果
error, // 错误信息
loading // 加载状态
}
}
}
```
### 2. useUploadFile
```js
// composables/uploadFile.js
import { watch } from "vue"
import { $U } from "@/uni_modules/tob-use-wrap/index.js"
export const useUploadFile = $U(uni.uploadFile)
```
```html
上传结果: {{result}}
加载状态: {{loading}}
错误信息: {{error}}
import { useUploadFile } from "@/composables/uploadFile.js"
export default {
setup() {
const { result, loading, error } = useUploadFile({
url: '...',
filePath: '...'
})
return {
result, // 上传结果
error, // 错误信息
loading // 加载状态
}
}
}
```
## 组织 🦔
欢迎关注 **帝莎编程**
- [官网](http://dishaxy.dishait.cn/)
- [Gitee](https://gitee.com/dishait)
- [Github](https://github.com/dishait)
- [网易云课堂](https://study.163.com/provider/480000001892585/index.htm?share=2&shareId=480000001892585)
## 插件市场
👉 [传送门](https://ext.dcloud.net.cn/plugin?id=7318)
## License
Made with markthree
Published under [MIT License](./LICENSE).