Appearance
Framework-Core
框架核心模块,提供基础功能, router, i18n, pinia
安装
bash
pnpm add @magustek/framework-core
createI18n
创建国际化实例
ts
import { createApp } from "vue";
import { createI18n, useLocale } from "@magustek/framework-core";
const app = createApp();
const i18n = createI18n({ locale: useLocale().locale.value });
i18n.withGlobalLocale();
i18n.mergeLocalMessages({ cn: {}, en: {} });
app.use(i18n);
createRouter
创建路由实例
ts
import { createApp } from "vue";
import { createRouter } from "@magustek/framework-core";
const app = createApp();
const router = createRouter({ base: "", routes: [] });
app.use(router);
createPinia
创建 pinia 实例
ts
import { createApp } from "vue";
import { createPinia } from "@magustek/framework-core";
const app = createApp();
const pinia = createPinia({ storage: localStorage });
app.use(pinia);
definePersistStore
创建一个默认持久化的 store
ts
import { definePersistStore } from "@magustek/framework-core";
import { storeToRefs } from "pinia";
export const useCountStore = definePersistStore("storeId", () => {
const count = ref(0);
return {
count,
};
});
// 响应式 store 不可以直接解构,如果要解构使用 storeToRefs
const { count } = storeToRefs(useCountStore());
defineRefStore
创建一个响应式的 store
ts
import { defineRefStore } from "@magustek/framework-core";
export const useCountStore = defineRefStore(
"storeId",
() => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => {
count.value++;
};
return {
count,
doubleCount,
increment,
};
},
{ persist: true }
);
// 响应式 store 可以直接解构出想要的数据和方法
const { count, doubleCount, increment } = useCountStore();
useAxios
发送请求
ts
import { useAxios } from'@magustek/framework-core';
const { get, post, request} = useAxios()
// 发送一个 get 请求
get('/api/user').then(res => {
console.log(res)
});
// 发送一个 post 请求
post('/api/user').then(res => {
console.log(res)
});
// 使用 request 发送请求
request({
url: '/api/user',
method: 'get' // 定义请求方法为 get
}).then(res => {
console.log(res)
});
标注响应体类型和请求参数类型
get、post、request方法都可以接收两个泛型,第一个标注响应体类型,第二个标注请求参数类型
ts
type MgRspFlagResponse = MgDataResponse | MgPageResponse | MgListResponse | MgBaseResponse
interface MgPageReq extends PlainObject {
page?: number
size?: number
sort?: 'ASC' | 'DESC'
}
ts
import { useAxios } from'@magustek/framework-core';
const { post } = useAxios()
post<MgListResponse, MgPageReq>('/api/user/page', {
page: 1,
size: 100,
sort: 'ASC'
}).then(res =>{
console.log(res)
});
高级用法
get、post、request方法都可以设置为非立即执行,以 post
方法为例
ts
import { useAxios } from "@magustek/framework-core";
const { post } = useAxios();
// 将请求设置为非立即执行,解构出 data, execute, isLoading
const { data, execute, isLoading } = post("api/user", null, null, {
immediate: false,
});
// 调用 execute 方法,传入参数
execute({
firstName: "Fred",
lastName: "Flintstone",
}).then(() => {
console.log(data, isLoading);
});
设置默认全局请求头
通过 setDefaults
方法设置请求头
javascript
import { useAxios } from "@magustek/framework-core";
const { setDefaults } = useAxios();
setDefaults({ baseURL: "/api" });
自定义拦截器
通过 interceptors
设置拦截器
javascript
import { useAxios } from "@magustek/framework-core";
const { interceptors } = useAxios();
// 请求拦截器
interceptors.request.use(onFulfilled, onRejected, options)
// 响应拦截器
interceptors.response.use(onFulfilled, onRejected, options)
处理未授权请求 401
内部会有默认处理方式,如果使用自定义的处理方式,会覆盖默认处理方法
javascript
import { useAxios } from "@magustek/framework-core";
const { onUnauthorized } = useAxios();
onUnauthorized((response) => {
// 处理未授权请求
});
onShow 已弃用
在 keep-alive 组件显示时触发,参考 framework-biz-utils
的 onShow
方法
useToken
获取、设置、删除 token 信息
javascript
import { useToken } from "@magustek/framework-core";
const { getToken, setToken, removeToken } = useToken();
// 获取 token
const token = getToken();
// 设置 token
setToken(token);
// 删除 token
removeToken();
useLocale
获取、设置当前国际化信息
ts
import { useLocale } from "@magustek/framework-core";
const { locale } = useLocale();
// 设置为英文模式
locale.value = 'en'
useClearStore
清除 store 缓存信息
ts
import { useClearStore } from "@magustek/framework-core";
const { clearAll } = useClearStore()
// 清除所有缓存数据
clearAll()
useCoreStore
使用 useCoreStore
获取基础数据
ts
import { useCoreStore } from '@magustek/framework-core'
const {
userInfo, // 当前用户基本信息
dicts, // 所有字典信息
authCodes // 当前用户所拥有的权限码
} = useCoreStore()
console.log(userInfo, dicts, authCodes)
useGlobalPinia
获取全局 pinia 实例
ts
import { useGlobalPinia } from '@magustek/framework-core'
const globaPinia = useGlobalPinia()
console.log(globaPinia)
结合 defineRefStore 使用
ts
import { defineRefStore, useGlobalPinia} from '@magustek/framework-core'
const defineCountStore = defineRefStore(
'countStore',
() => {
const count = ref(0);
return {
count,
}
}
const useCountStore = defineCountStore(useGlobalPinia())
export { useCountStore }
useGlobalStore
使用 useGlobalStore
提供的方法来存储、读取共享数据
ts
import { useGlobalStore } from '@magustek/framework-core'
const { getItem, setItem, removeItem } = useGlobalStore()
// 获取数据
const value = getItem('key')
// 设置数据
setItem('key', 'value')
// 删除数据
removeItem('key')
useKeepAliveTag
使用 useKeepAliveTag
提供的方法来缓存子应用的页面
vue
<!-- src/layout/index.vue -->
<template>
<keep-alive :include="keepAliveList">
<router-view v-slot="{ Component, route }">
<component :is="keepAliveComponent(Component, route)" />
</router-view>
</keep-alive>
</template>
<script lang="ts" setup>
import { useKeepAliveTag } from "@magustek/framework-core";
const { keepAliveList, keepAliveComponent } = useKeepAliveTag();
</script>
useMultiTags
使用 useMultiTags
提供的方法来操作标签栏
ts
import { useMultiTags } from '@magustek/framework-core'
const {
multiTags, // 当前所有的标签
activeTag, // 当前激活的标签
lastTag, // 上一个标签
pushTag, // 添加标签
closeTag, // 关闭标签
updateTag, // 更新标签
closeAll, // 关闭所有标签
closeActive, // 关闭激活的标签
closeOthers, // 关闭除激活的标签以外的标签
} = useMultiTags();
useDicts
通过字典 code 获取字典信息
ts
import { useDicts } from '@magustek/framework-core'
const list = useDicts('code')
console.log(list)
useParams
通过 useParams
获取自定义参数
ts
import { useParams } from '@magustek/framework-core'
const data = useParams('code')
console.log(data)