课时笔记心得

2301_81277777

已于 2025-02-27 19:31:33 修改

阅读量734

点赞数 9

文章标签：笔记

于 2025-02-27 12:46:17 首次发布

本文链接：https://blog.csdn.net/2301_81277777/article/details/145900793

版权

一、localstorage

（1）基础概念

localStorage是HTML5 Web Storage API的一部分，与sessionStorage不同，localStorage存储的数据没有过期时间，即数据会一直存在，直到被手动删除。这使得localStorage成为在客户端持久存储数据的理想选择。

（2）在Vue中的作用

持久化存储数据：
在Vue应用中，经常需要将一些数据持久化存储在客户端，以便在用户重新访问应用时能够恢复这些数据。例如，用户登录信息、应用设置等。使用localStorage可以方便地实现这一需求。

提高用户体验：
通过存储用户偏好设置、表单数据等信息，Vue应用可以在用户下次访问时自动恢复这些状态，从而提高用户体验。

减轻服务器负担：
对于一些不经常变化的数据，可以将其存储在localStorage中，以减少对服务器的请求次数，从而减轻服务器负担。

（3）使用方法

在Vue中使用localStorage非常简单，可以直接通过访问localStorage对象来进行数据的存取操作。localStorage提供了几个常用的方法来管理数据：

setItem(key, value)：存储数据到localStorage中。
getItem(key)：从localStorage中读取数据。

示例：

二、vuex

（1）定义与工作原理

定义：Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
工作原理：Vuex基于单向数据流、响应式更新和集中式存储的工作原理，确保状态管理的有效性和可预测性。

（2）核心概念

Vuex包含以下几个核心概念：

State（状态）：Vuex使用一个单一对象存储所有的应用级别状态，所有组件共享同一个状态。这样可以更容易地追踪每一个状态的变化。

Getter：Vuex中的计算属性，它允许你从store中的state派生出一些状态，类似于Vue组件中的计算属性。Getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Mutation：唯一能够更改Vuex state的方法。每个Mutation都有一个字符串的事件类型和一个回调函数，这个回调函数就是实际进行状态更改的地方。Mutation必须是同步函数。
Action：提交的是Mutation，而不是直接变更状态，可以包含任意异步操作。Action可以看作是对Mutation的封装，使得在需要执行异步操作时更加方便。

Module：由于使用单一状态树，所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象会变得相当臃肿。为了解决这个问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter，甚至是嵌套子模块。

（3）应用场景与优势

应用场景：Vuex适用于管理大型应用的状态、实现方便的状态共享以及利用调试工具进行状态跟踪和调试。
优势：
集中管理状态：Vuex使得应用中的所有状态都集中在一个地方进行管理，便于开发和后期维护。
可预测的状态变化：通过严格的规则确保状态以一种可预测的方式发生变化，提高了应用的稳定性和可维护性。
高效的组件通信：Vuex提供了一种高效的方式来实现组件之间的数据共享和通信。

示例：

图一：

图二：

图一+图二：

三、路由前置守卫

（1）定义与作用

1.定义：路由前置守卫是Vue Router提供的一种机制，用于在路由变更前执行某些操作。这些操作可以是验证用户身份、检查权限、加载数据等。

2.作用：

a权限控制：通过前置守卫，可以确保用户只能访问他们有权访问的路由。

b数据预加载：在路由切换前，可以提前从服务器加载所需的数据，以减少页面加载时间。

c导航拦截：根据特定条件，可以阻止或更改导航的目标。

（2）实现方法

在Vue Router中，路由前置守卫主要通过以下几种方式实现：

1.全局前置守卫：

使用router.beforeEach方法注册全局前置守卫函数。
该函数会在每次路由切换前执行，接收三个参数：to（目标路由对象）、from（当前路由对象）和next（控制路由跳转的函数）。
通过调用next()方法，可以控制是否允许路由跳转；传递一个新的路由路径可以进行重定向；传递false则取消路由跳转。

2.局部前置守卫：

在路由配置中，为特定路由添加beforeEnter钩子函数。
该函数的作用与全局前置守卫类似，但只针对指定的路由生效。

3.组件内的前置守卫：

在路由对应的组件中，可以使用beforeRouteEnter和beforeRouteUpdate钩子函数。
beforeRouteEnter在路由进入前执行，但此时组件实例尚未创建。
beforeRouteUpdate在路由更新前执行，但组件实例已复用。