nuxt3+pinia+elementplus+fetch请求封装
1.集成
npm i @vueuse/nuxt --save
npm i sass --save
npm i sass-loader --save
npm i element-plus --save
npm i @element-plus/nuxt --save
npm i @element-plus/icons-vue --save 图标
npm i pinia --save
npm i @pinia/nuxt --save
npm i @pinia-plugin-persistedstate/nuxt --save 持久化插件
nuxt.config.ts 配置文件如下:
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/styles/index.scss" as *;', // 这里是你自己的scss样式文件
},
},
},
server: { fs: { strict: false } },
},
modules: [
"@vueuse/nuxt",
"@pinia/nuxt",
"@pinia-plugin-persistedstate/nuxt",
"@element-plus/nuxt",
],
vueuse: {
ssrHandlers: true,
},
elementPlus: {
icon: "ElIcon", // icon前缀 <el-icon><el-icon-close /></el-icon>
},
});
pinia配置：
在composables目录下创建stores.ts:
import { defineStore } from "pinia";
export const useUserStore = defineStore("user-info", {
state: (): any => ({
user: null,
}),
actions: {
async login(data: any) {
this.user = data;
setStorage("user", data);
},
async logout() {
this.user = null;
removeStorage("user");
},
},
persist: true, // 持久化
});
直接在vue文件使用:
const userStore = useUserStore();
console.log(userStore.user);
fetch封装配置：
在composables目录下创建useMyFetch.ts:
import { ElMessage } from "element-plus";
import config from "~~/config";
const fetch = $fetch.create({
// 请求拦截器
async onRequest({ options }) {
options.baseURL = config.baseurl;
// 添加请求头,没登录不携带token
const userStore = useUserStore();
const userInfo = userStore.user;
if (!userInfo) return;
options.headers = new Headers(options.headers);
options.headers.set("token", `${userInfo.token}`);
},
// 响应拦截
onResponse({ response }) {
const userStore = useUserStore();
let data = response._data;
if (data.code != 200) {
ElMessage.error(data.message);
if (data.message == "请先登录!") {
userStore.logout();
}
}
if (response.headers.get("content-disposition") && response.status === 200)
return response;
// 在这里判断错误
if (response._data.code !== 200) return Promise.resolve(response._data);
// 成功返回
return response._data;
},
// 错误处理
onResponseError(error) {
const err = (text: string) => {
ElMessage.error(error?.response?._data.message ?? text);
};
if (error?.response?._data) {
switch (error.response.status) {
case 404:
err("服务器资源不存在");
break;
case 500:
err("服务器内部错误");
break;
case 401:
// 清除缓存
err("登录状态已过期，需要重新登录");
// TODO 跳转到登录界面
break;
case 403:
err("没有权限访问该资源");
break;
default:
err("未知错误！");
}
} else {
err("请求超时，服务器无响应！");
}
return Promise.reject(error?.response?._data ?? null);
},
});
// 自动导出
export const useHttp = {
get: (url: string, params?: any) => {
return fetch(url, { method: "get", params });
},
post: (url: string, params?: any) => {
return fetch(url, { method: "post", body: params });
},
};
使用:
useHttp.post("/answer/addAnswer", {
...option,
});
useHttp.get("/common/getQiniuToken", {
...option,
});
好了到这里基本就配置完成了 其他的不懂可以
官网: https://www.nuxtjs.org.cn/
nuxt3交流: qun 702247654
