0

我正在从 vue 4.x 迁移到 pinia,我的一个文件需要来自 store 的 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 
4

2 回答 2

1

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

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

于 2022-02-09T18:43:53.060 回答
0

这是我演示问题的示例项目: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 行之后触发。

在您的代码中,您可能在创建 Vue 应用程序/将 Pinia 添加到 Vue 应用程序之前触发了 axios 调用。请尝试在 Vue 应用程序设置完成后延迟触发 axios 调用。

于 2022-02-28T02:29:29.093 回答