0.3.5 • Published 2 years ago
vue-vulcan v0.3.5
vue-vulcan
一个为vue3定制的依赖注入解决方案
licenseMIT
设计理念
本方案将vue3组合函数的特性与依赖注入思想充分结合,可以为项目提供一套较为工程化的开发范式,并能一定程度上替代vuex等状态管理方案。
参考文章https://zhuanlan.zhihu.com/p/351519484
核心API
1. useProvider/useInjector
该api基于vue3内置的provide/inject实现。用法如下:
步骤一: 将项目的一段业务逻辑放进vue组合函数,例如用户的相关业务逻辑(业务数据与方法统一聚合在组合函数内)
export function useAuthInfo() {
const userData = ref(null);
const token = ref(null);
const login = (loginData: LoginData) => {
fetch('/login', {body: loginData, method: 'POST'})
.then(res => res.json())
.then(res => {
userData.value = res.data.userData;
token.value = res.data.token;
})
}
const logOut = () => {
fetch('logout')
.then(_ => { userData.value = null; token.value = null })
}
return {
userData,
token,
login,
logout
}
}
步骤二: 在app.vue中引用该组合函数,通过useProvider提供该函数。将该函数作为参数传入userProvider后,该函数会直接调用,返回的值将作为依赖提供给下层组件。
//app.vue
import { useAuthInfo } from 'src/vca';
import { useProvider } from 'vue-vulcan';
<script lang="ts" setup>
useProvider(useAuthInfo);
</script>
步骤三:在下层的子孙组件中通过useInjector获取useAuthInfo调用后返回的依赖值。
//userData.vue
import { useAuthInfo } from 'src/vca';
import { useInjector } from 'vue-vulcan';
<script lang="ts" setup>
const { userData } = useInjector(useAuthInfo);
</script>
<template>
<div>
<span>userData.username</span>
<span>userData.age</span>
</div>
</template>
扩展API
1. useRequest
基于fetch封装的http请求函数,使用示例:
export function useBookList() {
const [ bookList ] = useRequest('/getBookList', { data: {groupId: '1'} });
return {
bookList
}
}
useRequest调用后,会默认发起请求,若想控制发送请求的时机,可在第二参数内传入{auto: false}
export function useBookList() {
const [bookList, getBookList] = useRequest('/getBookList', { data: {groupId: '1'}, auto: false });
return {
bookList,
getBookList
}
}
该情况下,你必须手动调用getBookList方法才会触发请求。成功后,bookList会自动获得请求响应值。
此外,可以通过依赖注入对请求实现拦截功能
0.3.5
2 years ago
0.3.2
2 years ago
0.3.1
2 years ago
0.3.4
2 years ago
0.3.3
2 years ago
0.3.0
3 years ago
0.2.7
3 years ago
0.2.6
3 years ago
0.2.9
3 years ago
0.2.8
3 years ago
0.2.3
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.2.2
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.3
3 years ago
0.1.0
3 years ago