这段代码的意思是：对 itemList 数组进行遍历，把每一项的 age 属性累加起来，最终得到所有 age 的总和。
代码拆解
Go
itemList.reduce((pre, cur) => {
return pre += cur.age
}, 0)- **
reduce方法**：遍历数组，把每次计算的结果累积起来。 - **
pre（累加器）** ：上一次回调返回的结果，初始值是后面的0。 - **
cur（当前项）** ：当前遍历到的数组元素，在这里是itemList里的每个对象。 - **
cur.age** ：取当前对象的age属性值。 - **
return pre += cur.age**：把当前项的年龄加到累加器上，并返回给下一次循环。
最终结果就是 itemList 里所有对象 age 属性的总和。
举个实际例子
Go
const itemList = [
{ name: '张三', age: 18 },
{ name: '李四', age: 22 },
{ name: '王五', age: 25 }
]
const totalAge = itemList.reduce((pre, cur) => {
return pre += cur.age
}, 0)
console.log(totalAge) // 输出 65几个容易踩的坑
- 必须传初始值
0：如果数组为空，不传初始值会直接报错；传了0则安全返回0。 - **
pre += cur.age和pre + cur.age效果一样** ：+=会赋值，+只计算不赋值，但因为return都会返回结果，所以写法上等价。 - 回调里必须
return：如果忘了写return，累加器会变成undefined，结果就不对了。
在 Vue3 里的实际用法
通常在 computed 计算属性里配合使用，实现响应式求和：
Go
import { ref, computed } from 'vue'
const itemList = ref([
{ name: '篮球', age: 2 },
{ name: '足球', age: 5 },
{ name: '羽毛球', age: 4 }
])
const totalAge = computed(() => {
return itemList.value.reduce((pre, cur) => pre + cur.age, 0)
})这样 itemList 里的数据变化时，totalAge 会自动更新。
localStorage 本地存储
Go
// localStorage 本地存储
// const localStorageToken = localStorage.getItem("token")
// console.log("localStorageToken",localStorageToken)
// // 本地存储 写入
// localStorage.setItem("token","123456")
// // 本地存储 读取
// const token = localStorage.getItem("token")
// console.log("token",token)
// // 本地存储 删除
// localStorage.removeItem("token")
// // 本地存储 清空
// localStorage.clear()
// *****************************************************
关键注意点
只能存字符串：localStorage 只能存字符串，存对象或数组必须先 JSON.stringify，取出来再 JSON.parse。
javascript
// 存对象
const userInfo = { id: 1, name: '张三' }
localStorage.setItem('userInfo', JSON.stringify(userInfo))
// 取对象
const stored = JSON.parse(localStorage.getItem('userInfo') || '{}')
console.log(stored.name) // 张三
存储容量有限：一般限制在 5MB 左右，数据量太大会报错，别往里塞大文件或大量缓存数据。
删除：localStorage.removeItem('key') 删单个，
清空全部 ：localStorage.clear()
进阶方案
1 ：先安装：npm i @vueuse/core
2 ：加载：import { useStorage } from '@vueuse/core';
3 ：删除 localstoreage 值： <button @click="clear">删除</button>
# 代码开始
// 自动序列化，返回响应式 ref
const userInfo = useStorage('userInfo', { id: 1, name: '张三' })
// 直接改值，自动写入 localStorage
userInfo.value.name = '李四999977777'
console.log("userInfo.value.name",userInfo.value.name)
// 读取 localStorage 中的 userInfo
const a = useStorage('userInfo', "")
console.log("a.value",a.value)
// 读取 localStorage 中的 userInfo 并解析为 JSON 对象
const userInfoJson = useStorage('userInfo', "")
console.log("userInfoJson.value",userInfoJson.value)
//删除
const clear = () => {
userInfo.value = null
}
# 代码结束
封装工具函数：项目里可以封装 set / get / remove 方法，自动处理 JSON 序列化，代码更干净。
用 VueUse 的 useStorage：装了 @vueuse/core 的话，useStorage 可以把存储变成响应式 ref，改值自动写入存储，取出来也是响应式的。
javascript
import { useStorage } from '@vueuse/core'
// 自动序列化，返回响应式 ref
const userInfo = useStorage('userInfo', { id: 1, name: '张三' })
// 直接改值，自动写入 localStorage
userInfo.value.name = '李四'
需要响应式更新：如果希望多个组件同步 localStorage 的变化，可以结合 watch 或监听 storage 事件实现。
localStorage 的使用细节不少，可以继续了解JSON.stringify 会处理循环引用吗?或者storage 事件如何监听本地存储变化?监听响应式变量变化，自动保存到localStorage
Go
// 监听响应式变量变化，自动保存到localStorage
watchEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(storedValue.value));
} catch (error) {
console.warn(`Error setting localStorage key "${key}":`, error);
}
});
------------------------------------------------
版权声明：本文为CSDN博主「繁若华尘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41504401/article/details/145624397【Vue3】使用mitt实现任意组件通信
安装：【Vue3】使用mitt实现任意组件通信_vue3 mitt-CSDN博客
npm install mitt
Go
常用API
mitt().on() 绑定事件
mitt().emit() 触发事件
mitt().off() 卸载某个事件
mitt().all.clear() 卸载全部事件
使用方式一：封装模块暴露
步骤一
封装到utils工具箱中，对外暴露一个mitt实例
import mitt from 'mitt'
const emitter = mitt()
export default emitter;
------------------------------------------------
版权声明：本文为CSDN博主「心潮的滴滴」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42582773/article/details/139692216