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

news2025/1/22 8:05:31

本文将对比 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