网站谁做的比较好,WordPress 镜像同步,深圳龙岗网络公司,长沙制作网站公司哪家好本文将对比 Vuex 和 Pinia 在状态管理中的使用#xff0c;并介绍如何封装 Axios 进行网络请求。此外#xff0c;我们还将讨论动态路由、404 页面跳转以及面包屑导航的实现。
话不多说#xff0c;正文开始~~~
一、状态管理#xff1a;Vuex 与 Pinia 对比
1. Vuex
Vuex 是…
本文将对比 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 的核心特点包括
更简单的 APIPinia 的 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();
};
/scripttemplatedivp v-ifuserStore.isLoggedInWelcome, {{ userStore.userInfo.name }}/pbutton clickhandleLoginLogin/buttonbutton clickhandleLogoutLogout/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,}));
});
/scripttemplatedivnavspan v-for(crumb, index) in breadcrumbs :keyindexrouter-link :tocrumb.path{{ crumb.text }}/router-linkspan v-ifindex breadcrumbs.length - 1 / /span/span/nav/div
/template四、HTTP 与 HTTPS 1. HTTP HTTPHyperText Transfer Protocol是用于传输超文本的应用层协议。它是明文传输的容易被中间人攻击。 2. HTTPS HTTPSHyperText Transfer Protocol Secure是 HTTP 的安全版本通过 SSL/TLS 加密传输数据防止数据被窃取或篡改。
3. 使用 HTTPS
获取 SSL 证书可以从证书颁发机构CA获取 SSL 证书或者使用 Let’s Encrypt 免费获取。配置服务器在服务器上配置 SSL 证书启用 HTTPS。前端配置确保前端请求的 API 地址使用 HTTPS。
五、总结
通过对比 Vuex 和 Pinia我们可以看到 Pinia 在 Vue3 中更加简洁和高效。封装 Axios 可以帮助我们统一处理网络请求提高代码的可维护性。
