前端开发中的状态管理与网络请求封装

本文将对比 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;
```![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bb1e899be70845dc9c1a98246113d393.webp#pic_center)

面包屑导航：

<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