封装fetch时遇到的逻辑问题，和Vuex/Pinia形成循环引用如何解决？

  • Z时代
  • 2024-02-27
  • 分类：IT

小型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是如何解决这种循环引用的问题呢？

回答：

暂时有了解决方法，将useAppStore的使用放在sendHttp方法内部
好处：解决了循环引用
坏处：每一次发送请求变使用了一次useAppStore，可能会照成资源浪费

function sendHttp(){
    const appStore = useAppStore()
    ...
}

回答：

再弄个文件，把token的管理代码放进去，别的模块里面调用对应方法来读取token

以上是 封装fetch时遇到的逻辑问题，和Vuex/Pinia形成循环引用如何解决？ 的全部内容， 来源链接： utcz.com/p/932898.html

回到顶部