Vue音乐--搜索页面09_搜索历史记录本地缓存

本文介绍了如何在Vue应用中创建搜索历史记录,并利用本地缓存(localStroage)进行存储。通过Vuex管理状态,详细阐述了新建state、配置catch.js公共方法、限制数组长度并移除重复项、使用插件的get和set方法以及在actions中处理存储的步骤。此外,还提到了在state初始化时从本地缓存加载数据的技巧,以确保重启应用后数据依然存在。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大概步骤:

在这里插入图片描述

目标效果

在这里插入图片描述


九、搜索历史数据新建

  • 要点
    • 新建vuex的state数组变量,点击时存入和调用时读取数据即可
    • 利用本地缓存插件操作

如果不可考虑本地缓存的话,就是获取到state中数组,并把点击的值push进行数组,然后存下这个数组替换掉state中的即可
而要存入本地缓存的话,即push进本地缓存,state则从本地缓存中获取。
操作稍微复杂因此,单独做成js用actions来操作(mutations只赋值?)

(一)、配置新的state

state.js

const state = {
   
/*搜索历史关键词query数据*/
	searchHistory:[]
}
export default state

getters.js

/*搜索历史数据getter映射*/
export const searchHistory = state=> state.searchHistory

mutation-types.js

/*存入搜索历史数据的方法名*/
export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY'

mutations.js

import * as types from './mutation-types'</
### 解决Vue-Router 3 刷新页面后路由丢失 当使用 Vue Router 3 构建单页应用程序 (SPA) 并遇到刷新页面后路由丢失的问题时,这通常是因为浏览器刷新操作使得整个应用被重新加载,从而导致动态添加的路由信息丢失。为了防止这种情况发生并保持用户体验的一致性,有几种方法可以解决问题。 #### 方法一:采用 History Mode 配合 URL 重写工具 如果项目中使用的是 history 模式的路由,则需要服务器端支持 URL 重定向功能来处理未匹配到静态资源请求的情况。通过配置 Webpack 或其他构建工具中的 HTML 插件以及设置 Nginx 或 Apache 等 web server 来确保所有未知路径都被导向至 index.html 文件[^4]。 对于开发环境下的本地调试,可以通过修改 devServer 的配置项实现自动转发: ```javascript // vue.config.js module.exports = { publicPath: './', devServer: { historyApiFallback: true, } }; ``` #### 方法二:持久化存储 Route State 另一种解决方案是在每次成功导航之后将当前访问过的路由记录下来,并保存在一个可靠的介质里比如 localStorage 或 sessionStorage 中;当用户再次进入网站或是触发 F5 键刷新的时候读取这些缓存的数据来进行初始化工作[^2]。 具体做法如下所示: 1. 创建一个新的 Vuex store module 用于管理 route state; 2. 在 router.beforeEach() 全局前置守卫里面监听每一次成功的跳转事件并将最新的 location 对象序列化成字符串形式存入 local/sessionStorage; 3. 应用启动之初尝试从 storage 取出之前存在的状态对象并通过 replace 方法更新内部历史栈而不会引起视图变化。 这种方法虽然有效但也存在局限性——它依赖于客户端浏览器特性并且可能带来一定的性能开销。 #### 方法三:利用 keep-alive 组件优化体验 针对某些特定场景下(如多级嵌套路由),即使解决了上述问题仍然可能出现子组件销毁重建的现象影响交互流畅度。此时可考虑引入 `<keep-alive>` 标签包裹住要缓存的内容部分以减少不必要的渲染过程提高效率[^1]。 ```html <template> <div id="app"> <!-- 缓存多个命名视图 --> <keep-alive :include="['child-a', 'child-b']"> <router-view></router-view> </keep-alive> </div> </template> <script> export default { computed: { cachedViews() { return this.$store.state.tagsView.cachedViews; }, }, }; </script> ``` 以上三种策略可以根据实际需求组合运用,既能够很好地应对由于页面刷新带来的各种挑战又兼顾到了不同层次上的优化考量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值