实战进阶 Vue3+Axios+pinia
生活随笔
收集整理的這篇文章主要介紹了
实战进阶 Vue3+Axios+pinia
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實戰進階 Vue3+Axios+pinia
創建文件utils/request.js
import Axios from 'axios';
export const request = Axios.create({
baseURL: '/api'
});
// 攔截器
request.interceptors.request.use((config) => {
// 如果 本地存儲有token 使用token到 請求頭
const token = sessionStorage.getItem('token');
if (token) {
config.token = token;
}
return config;
});
request.interceptors.response.use((response) => {
// 如果 response.data.token 保存token
if (response.data.token) {
sessionStorage.setItem('token', response.data.token)
}
return response;
})
代理配置(vue.config.js)
module.exports = {
configureWebpack: { // @vue/cli內部會將這個對象與內置的配置對象merge
devServer: {
open: true,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
// 由于server接口 不以/api開頭
pathRewrite: {
'^/api': ''
}
}
}
}
}
}
Pinia
相較于Vuex更簡化的狀態管理
Vuex
Pinia
Pinia代碼
安裝
npm install pinia
引入根目錄 main.js 中
import { createPinia } from 'pinia';
createApp(App).use(createPinia())
創建vuex定義文件 store/user.js
import { defineStore } from 'pinia';
export const useUser = defineStore({
id:'user', // 倉庫唯一標識
state() { // 數據
return {
menus: [],
isLogin: false,
userinfo: {}
}
},
actions:{ // 變更數據的行為
setMenus(menu) { // 直接操作state
this.menus = menu;
},
setUserinfo(userInfoObj) { // 通過patch操作
this.$patch(userInfoObj); //userInfoObj => {userinfo:user}
}
}
使用倉庫
1 import { useUser } from '@/store/user'; //引入vuex 文件
2 const user = useUser();
3 user.menus || user.setMenus // 訪問數據 或 action
總結
以上是生活随笔為你收集整理的实战进阶 Vue3+Axios+pinia的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： man手册、zip备份
- 下一篇： Unity3D集成腾讯语音GVoice