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

Question

我正在从vue 4.x迁移到pinia，我的一个文件需要存储api密钥。但是，即使我遵循皮尼亚文献，我也不能让它工作。这是我使用皮尼亚的方法

// Repository.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

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

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

Answer 3

下面是我演示这个问题的示例项目：https://codesandbox.io/s/infallible-shamir-sxrlb9。

这里的主要原因是，在将皮尼亚的商店传递给Vue的应用程序之前，你不能使用它。因此给出了以下代码：

const pinia = createPinia(); // line 1

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

您不能在第1行和第2行之间触发任何存储，但只能在第2行之后触发。

在代码中，很可能会在创建Vue app /将Pinia添加到Vue应用程序之前触发axios调用。请在Vue应用程序的安装完成后，尝试延迟axios调用来触发。