Как использовать Pinia вне компонента в файле js

Question

Я перехожу с vue 4.x на pinia, одному из моих файлов нужен ключ API из магазина. Но я могу заставить его работать, даже если я следую документации 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

Вы можете решить это, импортировав магазин внутрь перехватчиков

      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

Согласно документации, созданная вами пиния должна быть параметром app.use. Кроме того, useAuthStore должен быть хранилищем, определенным с помощью defineStore, и не должен принимать параметр. Я оставлю ссылку, которая может вам помочь, она не создает магазин, но вы можете просмотреть боковое меню, чтобы увидеть несколько примеров.

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

Answer 3

Вот мой пример проекта для демонстрации проблемы: https://codesandbox.io/s/infallible-shamir-sxrlb9.

Основная причина здесь в том, что вы не можете использовать магазины Pinia, прежде чем передать их в приложение Vue. Итак, указан следующий код:

      const pinia = createPinia(); // line 1

createApp(App).use(pinia).mount("#app"); // line 2

Вы не можете активировать сохранение между строками 1 и 2, но только после строки 2.

В вашем коде, вероятно, вы инициируете вызов axios перед созданием приложения Vue/добавлением Pinia в приложение Vue. Пожалуйста, попробуйте отложить запуск этого вызова axios после завершения установки приложения Vue.