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

Question

我正在从 vue 4.x 迁移到 pinia，我的文件之一需要来自商店的 api 密钥。但即使我遵循Pinia 文档，我也无法使其工作。这是我如何使用 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"},
  
});

预期结果：从商店获取令牌。

控制台错误

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

Note: this working inside a component 

Answer 1

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

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;

此讨论可能对您有帮助：转到 GitHub 讨论

Answer 2

根据文档，您创建的 pinia 必须作为 app.use 的参数。不仅如此，useAuthStore 必须是使用 DefineStore 定义的存储，并且不能带参数。我将留下一个可以帮助您的链接，它不会创建商店，但您可以浏览侧面菜单以查看几个示例。

https://pinia.vuejs.org/core-concepts/outside-component-usage.html