前端开发中的状态管理与网络请求封装
本文将对比 Vuex 和 Pinia 在状态管理中的使用，并介绍如何封装 Axios 进行网络请求。此外，我们还将讨论动态路由、404 页面跳转以及面包屑导航的实现。
话不多说，正文开始~~~
一、状态管理：Vuex 与 Pinia 对比
1. Vuex
Vuex 是 Vue.js 官方推荐的状态管理库，适用于 Vue2 和 Vue3。它的核心概念包括：
- State：存储应用的状态数据。
- Getters：从 State 中派生出一些状态，类似于计算属性。
- Mutations：同步修改 State 的方法。
- Actions：异步操作，通常用于提交 Mutations。
- Modules：将 Store 分割成模块，便于管理大型应用的状态。
2. Pinia
Pinia 是 Vue3 推荐的状态管理库，相较于 Vuex，它更加轻量且易于使用。Pinia 的核心特点包括：
- 更简单的 API：Pinia 的 API 更加简洁，去除了 Vuex 中的 Mutations，直接使用 Actions 进行同步和异步操作。
- 更好的 TypeScript 支持：Pinia 天生支持 TypeScript，提供了更好的类型推断和代码提示。
- 模块化：Pinia 自动支持模块化，无需手动划分模块。
3. 使用 Pinia 实现跨组件状态管理
以下是一个简单的 Pinia 示例：
-
安装 Pinia：
npm install pinia -
创建 Store：
在src/stores目录下创建userStore.js：import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state: () => ({ userInfo: null, isLoggedIn: false, }), actions: { login(userInfo) { this.userInfo = userInfo; this.isLoggedIn = true; }, logout() { this.userInfo = null; this.isLoggedIn = false; }, }, }); -
在组件中使用 Store：
<script setup> import { useUserStore } from '@/stores/userStore'; const userStore = useUserStore(); const handleLogin = () => { userStore.login({ name: 'John Doe' }); }; const handleLogout = () => { userStore.logout(); }; </script> <template> <div> <p v-if="userStore.isLoggedIn">Welcome, {{ userStore.userInfo.name }}</p> <button @click="handleLogin">Login</button> <button @click="handleLogout">Logout</button> </div> </template>
二、封装 Axios 进行网络请求
在实际项目中，我们通常会对 Axios 进行封装，以便统一处理请求和响应。以下是一个简单的 Axios 封装示例：
-
安装 Axios：
npm install axios -
创建 Axios 实例：
在src/utils目录下创建request.js：import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VITE_API_BASE_URL, timeout: 10000, }); instance.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { return Promise.reject(error); } ); instance.interceptors.response.use( (response) => { return response.data; }, (error) => { return Promise.reject(error); } ); export default instance; -
在组件中使用封装后的 Axios：
import request from '@/utils/request'; const fetchUserData = async () => { try { const response = await request.get('/api/user'); console.log(response); } catch (error) { console.error(error); } };
三、登录鉴权与动态路由
在后台管理系统中，登录鉴权和动态路由是常见的需求。以下是实现这些功能的步骤：
1. 动态路由
- 动态添加路由：根据用户的权限动态加载路由，使用
addRoute方法动态添加路由。 - 404 页面跳转：如果没有匹配的路由，跳转到 404 页面。
2. 面包屑导航
面包屑导航可以帮助用户了解当前页面的位置。可以通过路由的 meta 信息动态生成面包屑。
以下是一个简单的实现示例：
-
动态路由与 404 页面：
import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', component: () => import('@/views/Home.vue'), }, { path: '/login', component: () => import('@/views/Login.vue'), }, { path: '/:pathMatch(.*)*', component: () => import('@/views/NotFound.vue'), }, ]; const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach((to, from, next) => { const isLoggedIn = localStorage.getItem('token'); if (to.path !== '/login' && !isLoggedIn) { next('/login'); } else { next(); } }); export default router; ``` -
面包屑导航：
<script setup> import { useRoute } from 'vue-router'; const route = useRoute(); const breadcrumbs = computed(() => { return route.matched.map((record) => ({ text: record.meta.breadcrumb, path: record.path, })); }); </script> <template> <div> <nav> <span v-for="(crumb, index) in breadcrumbs" :key="index"> <router-link :to="crumb.path">{{ crumb.text }}</router-link> <span v-if="index < breadcrumbs.length - 1"> / </span> </span> </nav> </div> </template>
四、HTTP 与 HTTPS
-
1. HTTP
HTTP（HyperText Transfer Protocol）是用于传输超文本的应用层协议。它是明文传输的，容易被中间人攻击。 -
2. HTTPS
HTTPS（HyperText Transfer Protocol Secure）是 HTTP 的安全版本，通过 SSL/TLS 加密传输数据，防止数据被窃取或篡改。
3. 使用 HTTPS
- 获取 SSL 证书：可以从证书颁发机构（CA）获取 SSL 证书，或者使用 Let’s Encrypt 免费获取。
- 配置服务器：在服务器上配置 SSL 证书，启用 HTTPS。
- 前端配置：确保前端请求的 API 地址使用 HTTPS。
五、总结
通过对比 Vuex 和 Pinia，我们可以看到 Pinia 在 Vue3 中更加简洁和高效。封装 Axios 可以帮助我们统一处理网络请求，提高代码的可维护性。
原文地址：https://blog.csdn.net/2301_80052985/article/details/145249649
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！