调用api与axios，因为我的组件和我的商店

Question

我是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 -我试过通过像这样的陌生人调用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')

非常感谢你的帮助。

Answer 1

如果你正在创建一个新的应用程序，我会使用Pinia，它实际上是VueX的下一个版本。不要把用户放在localStorage中，而是放在一个你可以从所有视图和组件访问的存储中。

所以Axios设置在composables/myaxiosfile.js

// 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()

Answer 2

我不知道这是不是正确的方法，但是这样做，它允许我在我的组件中使用存储api。

store/index.js
state: {
api: {},
[...]
},
mutations: {
setApi: function (state, api) {
state.api = api;
},
connexionUser: function (state, user) {
state.user = user;
api.defaults.headers.common['Authorization'] = 'Bearer ' + user.token;
state.api = api;
},
[...]
},
actions: {
setApi: ({commit}) => {
commit('setApi', api);
},
[...]
},

App.vue
mounted() {
this.$store.dispatch('setApi');
[...]
}

像这样，离线时，它加载api，这是设置在我的商店的顶部(见我的问题)，当我登录时，我更新api的状态有JWT认证。