封装fetch时遇到的逻辑问题,和Vuex/Pinia形成循环引用如何解决?
小型vue项目,使用ajax的需要较为简单。所以使用了原生的fetch来发送请求,但是在做自动附带Token时遇见问题。如:Token存在Vuex/Pinia中,我封装的fetch文件中需要拿到Pinia中的Token,而Pinia中会包含使用fetch发送请求的异步方法。这就形成了 封装的fetch文件 引用 Pinia的模块文件 来获取Token
../../httpHelper.js
import {useAppStroe} from '/@/store/module/app'
const appStore = useAppStore()
export function sendHttp(apiName,params,callback){
// 接口特殊,token存在body中
params.token = stroe.getToken;
let baseUrl = 'xxxx' + apiName;
fetch(baseUrl, { method: 'post', body: params }).then((res) => {
...
});
}
Vuex的模块文件 引用 封装的fetch文件 来发送请求
../../app.js
import { defineStore } from 'pinia'
import { sendHttp } from '/@/utils/httpHelper'
export const useAppStore = defineStore({
state:()=>({
Token:''
}),
getter:{
getToken(state) {
return state.Token || '';
},
},
actions:{
setToken(token: string) {
this.Token = token;
},
login(){
...
sendHttp('login',{},()=>{})
}
}
})
循环引用,导致错误。如何解决?axios是如何解决这种循环引用的问题呢?
回复
1个回答

test
2024-07-20
暂时有了解决方法,将useAppStore的使用放在sendHttp方法内部好处:解决了循环引用坏处:每一次发送请求变使用了一次useAppStore,可能会照成资源浪费
function sendHttp(){
const appStore = useAppStore()
...
}
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容