用axios调用api,因为我的组件和我的存储

guz6ccqo  于 2022-11-23  发布在  iOS
关注(0)|答案(2)|浏览(154)

我是Vue 3(cli)的新手,对前端技术一点也不熟悉,所以我很难理解我正在阅读的信息。
我成功地用api和JWT创建了一个注册/登录界面,在我正在进行的项目中,用户信息需要保存在任何地方,以便训练自己,所以我在我的商店中配置了axios。

store/index.js

import { createStore } from 'vuex'
import axios from 'axios';

const api = axios.create({
  baseURL: 'http://127.0.0.1:7000'
});

let user = localStorage.getItem('user');
if(null === user) {
  user = {uuid: '', token: ''};
} else {
  try {
    user = JSON.parse(user);
    api.defaults.headers.common['Authorization'] = 'Bearer ' + user.token;
  } catch (e) {
    user = {uuid: '', token: ''};
  }
}
export default createStore({
  state: {
    status: '',
    user: user,
    userInfos: {},
  },
  mutations: {
    [...]
  },
  getters: {
  },
  actions: {
    [...]
  },
  modules: {
  }
})

我希望能够从我的组件使用api。我有几种方法:
1 -我已经将axios导入到我的组件中,但这根本不正确,因为我将在我的所有组件中需要axios。
2 -我看过不同的文档,它们解释了如何全局配置axios,但没有两个是相同的,我无法让任何东西工作。
3 -在我的方法中,我尝试过通过类似于.$store.api这样的奇怪方式调用api,但显然这是被滥用的。
有谁能帮助我理解什么是从我的组件和只有一个配置的存储中使用axios的正确方法吗?知道我需要能够保持我的头是最新的,以便使用承载令牌进行身份验证(用户登录时,一个突变会在存储中更新它)。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faMedal } from '@fortawesome/free-solid-svg-icons'
import { faLaptopMedical } from '@fortawesome/free-solid-svg-icons'
import { faCookieBite } from '@fortawesome/free-solid-svg-icons'
import { faCoins } from '@fortawesome/free-solid-svg-icons'
import { faHourglassStart } from '@fortawesome/free-solid-svg-icons'
import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
import { faInfo } from '@fortawesome/free-solid-svg-icons'
import { faGears } from '@fortawesome/free-solid-svg-icons'

library.add(
    faMedal,
    faCoins,
    faLaptopMedical,
    faCookieBite,
    faHourglassStart,
    faUpRightFromSquare,
    faInfo,
    faGears
);

createApp(App)
    .component('font-awesome-icon', FontAwesomeIcon)
    .use(store)
    .use(router)
    .mount('#app')

非常感谢你的帮助。

flmtquvp

flmtquvp1#

如果你要创建一个新的应用程序,我会使用Pinia,它实际上是VueX的下一个版本。不要把用户放在localStorage中,而是放在一个你可以从所有视图和组件访问的商店中。
composables/myaxiosfile.js中的Axios设置

// src/stores/oneStore.js

import { defineStore } from "pinia";

// Possibly import and deconstruct functions from @/api.js and use
// those functions in the "actions" section of the store, 
// updating the state according to the answer of the api call.

export const useOneStore = defineStore("oneStore", {
  state: () => {
    return {
      user: true
    }
  }
  // actions
  // getters
})

在组件中:

import { useOneStore } from '../stores/oneStore';
const oneStore = useOneStore()
unftdfkk

unftdfkk2#

我不知道这是否是正确的方法,但是通过这样做,我可以在我的组件中使用store api。
第一个
就像这样,离线时,它加载设置在我的存储顶部的API(请参见我的问题),当我登录时,我更新状态为具有JWT身份验证的API。

相关问题