pinia - 如何在js文件中的组件外使用Pinia

Question

我正在从 vue 4.x 迁移到 pinia，我的一个文件需要来自商店的 api key 。但是即使我遵循 Pinia documentation 也无法让它工作.这是我如何使用 pinia

//存储库.ts

import axios from "axios";

import { createPinia } from 'pinia'
import { useAuthStore } from '../stores/auth-store'
const pinia=createPinia();
let authStore = useAuthStore(pinia);
const baseURL = 'http://127.0.0.1:5678/res-api';

export default axios.create({
  baseURL,
  headers:{"Authorization":"Bearer " + authStore.getToken,
"Accept":"application/json"},
  
});

预期结果:从商店中获取 token 。

控制台错误

Uncaught ReferenceError: Cannot access 'useAuthStore' before initialization
    at Repository.ts:6:17
    

Note: this working inside a component 

Answer 1

您可以通过在拦截器中导入商店来解决这个问题

import axios from "axios";
import { useAuthStore } from '../stores/auth-store';

const axiosClient = axios.create({
    baseURL: 'http://127.0.0.1:5678/res-api'
});

axiosClient.interceptors.request.use((config) => {
    const authStore = useAuthStore();
    config.headers.Authorization = `Bearer ${authStore.getToken}`;
    config.headers.Accept = "application/json";
    return config
})

export default axiosClient;

此讨论可能对您有所帮助:Go to GitHub discussion