vue缓存数据的方式,vue 本地缓存
本文主要介绍了vue调用本地缓存(监控数据变化)的方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue使用方法调用本地缓存深度监控vue在main中侦听缓存事件以创建缓存事件，在组件生命周期中侦听缓存事件，并在组件业务代码中获取缓存使用值。
vue调用本地缓存
深度监视
为了找到对象内部值的变化，可以在option参数中指定deep:true；[监视阵列变化不需要这个]
使用方法
值为true的处理程序是一个回调函数，即当监视到更改为true或false时应该执行的函数deep。确认是否是深度监控(一般不能监控对象属性值的变化，但可以监控数组值的变化)。值为true或false的immediate，确认处理程序的函数是否用当前初始值执行。
配置新的工具文件夹。
配置缓存文件
接收数据页面
模板
差异
！-添加一个增加方法以传递给子组件-
石坚：addTodo=addTodo /
！-传递给子组件的数据-
！-传递删除方法子组件-
shijianone:todos= todos :delTodo= delTodo /
！-传递给子组件-
石尖窝
:todos=todos
:selectedAllTodo= selectedAllTodo
:delFinishedTodos= delFinishedTodos
/
/div
/模板
脚本范围
从“@/组件/石坚”导入石坚；
从“@/components/Shijianone”导入Shijianone；
从“@/components/Shijiantwo”导入Shijiantwo；
从“@/utils/localstorgautil”导入localstorgautil；
导出默认值{
名称：正文，
data() {
返回{
todos:localstorageutil . readtodos()，
};
},
组件：{
石坚，
世家酮，
石家庄，
},
//添加删除方法
//添加递增方法
方法：{
//将数据参数作为(数据)插入
addTodo(todo) {
//传递数据(todo)
this . todos . un shift(todo)；
},
delTodo(索引){
//删除一个。
this.todos.splice(索引，1)；
},
//检查所有任务？
selectedAllTodo(isCheck) {
this.todos.forEach((todo)={
todo.finished=isCheck
});
},
//选择要删除的方法。
delFinishedTodos() {
this . todos=this . todos . filter((todo)=！todo . finished)；
},
},
观察：{
//深度监控
todos: {
//一旦监视到更改，就将其保存在本地
//.saveTodos added()将报告错误。
//执行保存操作。
handler:localstorageutil . savetodos，
//deep: true，深度监控
深：真的，
//immediate为真。一进来就执行处理函数
即时：真的，
},
},
};
/脚本
样式范围
/风格
配置缓存文件内容
const LKTODO= lktodo
导出默认值{
readTodos(){
返回JSON . parse(local storage . getitem(LKTODO) [])
},
saveTodos(todos){
//下面一行只是为了打印。
console . log(todos)；
localStorage.setItem(LKTODO，JSON . stringify(todos))；
}
}
vue监听缓存事件
随着H5的更新，前端经常使用本地存储来交互处理数据。如果您想要监视缓存更改，下面的代码就是您想要的。
在main创建缓存事件
//侦听缓存事件
vue . prototype . $ addStorageEvent=function(type，key，data) {
if (type===1) {
//创建StorageEvent事件
var newStorageEvent=document . create event( storage event )；
常量存储={
setItem: function(k，val) {
localStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent . initstorageevent(
存储项目，
假的，
假的，
k，
空，
瓦尔，
空，
空
);
//发送对象
window . dispatch event(newStorageEvent)；
},
};
返回storage.setItem(key，data)；
}否则{
//创建一个存储事件事件
var newStorageEvent=document。创建事件(“存储事件”)；
常量存储={
setItem: function(k，val) {
sessionStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent。initstorageevent(
设置项目，
假的，
假的，
k，
空，
瓦尔，
空，
空
);
//派发对象
窗户。调度事件(newStorageEvent)；
},
};
返回storage.setItem(key，data)；
}
};
在组件生命周期中 监听缓存事件并取值
window.addEventListener(
stotageItem，
(e)={ //e代表存储的数据{答：1 }
解析（英语)
},
错误的
);
在组件业务代码 进行缓存使用
这个addStorageEvent(0，使用存储，
//写入数据
JSON.stringify({ a:1 })
);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。