vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

刘大猫.

已于 2022-07-22 20:12:21 修改

阅读量459

点赞数

分类专栏： Vue2专栏文章标签：前端 webStorage localStorage sessionStorage vue

于 2022-05-17 22:33:19 首次发布

本文链接：https://blog.csdn.net/a924382407/article/details/124831697

版权

Vue2专栏专栏收录该内容

109 篇文章 45 订阅

订阅专栏

本文详细介绍了如何在Vue2中利用本地缓存进行组件通信，通过监听watch属性实现数据变化时自动保存到本地缓存，确保刷新后数据依然存在。文章强调了深度监听的重要性，以及在处理空数组时使用“||[]”的技巧，同时提供了相关Vue2知识点的链接作为补充学习资料。

摘要由CSDN通过智能技术生成

在这里插入图片描述

概述

在这里插入图片描述

前面文章案例已经练习了父子组件之间的通信，这一节讲述如何把todos数组放进本地缓存中，因为实际开发场景中频繁查询的数据很有可能会用到本地缓存技术。

思考：如何改成使用本地缓存，是写一堆按钮每次触发就是往本地缓存种get和set？答案是错误的，因为太复杂了会写一堆的get和set方法

正确答案：使用监听watch属性，因为只要监听到数据改变 =》往本地缓存种添加监听改变后的数据就行，这样就能实现本地缓存的更新。

前端代码

App.vue 只写了代码不同的地方

export default {
data() {
		return {
			//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
			todos:JSON.parse(localStorage.getItem('todos')) || []
		}
	},
		watch: {
			todos:{
				deep:true,
				handler(value){
					localStorage.setItem('todos',JSON.stringify(value))
				}
			}
		}
}

注意点1：该案例只是把之前Todo-list案例的数组放到本地缓存中保存

注意点2：handler(value)中因为我们只用到新值，所以只写一个value即可，省略了oldValue，之前的长这样handler(newValue, oldValue)

注意点3：默认网站会把todos数组自动调用.toString()方法，会导致本地缓存中保存的值为[Object Object]，所以需要JSON.parse()方法转换

注意点4：

问题：为啥JSON.parse()最后要拼接个“|| []”？

答案：当todos没有任何一条记录时，执行JSON.parse(localStorage.getItem(‘todos’))其值为null，而下方组件MyFooter.vue会继续使用todos.length就会导致报错，所以采用拼接“|| []”，依据是 null || [] 输出表达式值为 []，即||前方有值就返回该值，如果||前方为null，则整体表达式值为[]

注意点5：