我是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')
非常感谢你的帮助。
2条答案
按热度按时间flmtquvp1#
如果你要创建一个新的应用程序,我会使用Pinia,它实际上是VueX的下一个版本。不要把用户放在localStorage中,而是放在一个你可以从所有视图和组件访问的商店中。
composables/myaxiosfile.js
中的Axios设置在组件中:
unftdfkk2#
我不知道这是否是正确的方法,但是通过这样做,我可以在我的组件中使用store api。
第一个
就像这样,离线时,它加载设置在我的存储顶部的API(请参见我的问题),当我登录时,我更新状态为具有JWT身份验证的API。