如何将$axios注入半夏贮藏库

Question

我试图将我的axios实例注入商店，以便能够登录到应用程序中，但不幸的是，我无法登录。我有下面的引导文件

import { boot } from 'quasar/wrappers';
import axios from 'axios';
import type {AxiosResponse} from 'axios';
import type { StatusCodes } from 'http-status-codes';

export type WrappedResponse = { response?: AxiosResponse };

export const isError = (e: WrappedResponse, statusCode: StatusCodes) =>
  e.response && e.response.status === statusCode;

export default boot(({ app, store }) => {
  const api = axios.create({ baseURL: import.meta.env.VITE_APP_API_BASE_URL });

  app.provide('axios', api);
  store.$axios = api;
});

在我的店里我有：

import { defineStore } from 'pinia';

export const useAppStore = defineStore('app', {
  state: () => ({
  }),
  getters: {
  },
  actions: {
    async login() {
      console.log(this.$axios);
      console.log('Logging in from store');
    }
  },
});

每当调用登录时，它都会打印未定义的内容。知道我做错了什么吗？

Answer 1

您只需创建一个半夏插件

export default boot(({ app, store }) => {
  const api = axios.create({ baseURL: import.meta.env.VITE_APP_API_BASE_URL });

  app.provide('axios', api);
  store.use(() => ({ api })); // 
});