Skip to content

1.在axios中使用pinia

@/main.ts

ts
import { mainStore } from "@/store/user";
export const store = mainStore(); //这里只能在main.ts中创建store,才可以在axios中使用,因为axios和router创建的时间都早于pinia

@/request/index.ts

ts
import { store } from "@/main"; //引入在main.ts中创建的的store

// 原来的在setup中的方式,在axios文件中行不通!
// import { mainStore } from "@/store/user";
// const store = mainStore(pinia);

//然后到了这里面才可以使用,否则还是创建不成功的
service.interceptors.request.use(
    //...
    // 在此处添加请求头等,如添加 token
    if (store.token) {
      config.headers["Authorization"] = `Bearer ${store.token}`;
    }
	//...
)

2.在router中使用pinia

@/store/index.ts

ts
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;

@/router/index.ts

ts
//router中使用pinia:
import pinia from "@/store"; // 实际上这个pinia是createPinia(),这里必须传入,因为router获取不到全局的pinia
import { mainStore } from "@/store/user";
const store = mainStore(pinia);