vue本地存储数据,vuex数据监听
本文主要介绍了如何在vue中实时监控本地存储，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
如何实时监控本地存储vue监控数据更改watch的基本用法获取以前的值处理程序方法和即时属性deep deep listening
如何实时监听本地存储
在main.js中
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( setItem ，false，false，k，null，val，null，null)；
//发送对象
window . dispatch event(newStorageEvent)；
}
}
返回storage.setItem(key，data)；
}否则{
//创建StorageEvent事件
var newStorageEvent=document . create event( storage event )；
常量存储={
setItem: function (k，val) {
sessionStorage.setItem(k，val)；
//初始化创建的事件
newstorageevent . initstorageevent( setItem ，false，false，k，null，val，null，null)；
//发送对象
window . dispatch event(newStorageEvent)；
}
}
返回storage.setItem(key，data)；
}
}
想触发就触发。
这个。$addStorageEvent(2， butCountNum ，this . butcount)；
监听mouted hook函数。
window . addevent listener( setItem ，(e)={
if(e.key===butCountNum){
//写逻辑
}
vue监听数据变化
监控数据变化是由Vue中的监听器实现的。你也可以理解为监听器，无时无刻不在监控一些数据的变化。
watch的基本用法
之前，我们向js添加了数据和方法。这一次，我们希望添加watch属性。让我们熟悉一下添加侦听器的位置：
脚本
导出默认值{
名称：“应用程序”，
//数据
data() {
return { }；
},
//方法
方法：{}，
//监听器
观察：{}
};
/脚本
一个简单的例子：
模板
p您单击该按钮的次数是：{{ count }} /p
按钮@ Click= add v-model= count Click/button
/模板
脚本
导出默认值{
名称：“应用程序”，
data(){
返回{
计数：0
}
},
方法：{
add(){
this.count
}
},
观察：{
//正在侦听的变量计数
计数(){
Console.log(计数已更改)；
}
}
};
/脚本
侦听器更常用于异步操作，所谓异步操作就是数据返回被延迟的操作。例如，如果我们想要请求后端接口，接口会将数据返回给我们，然后我们会将数据呈现在页面上。
从请求接口到返回数据，需要一定的时间。这时，我们可以使用监听器监听返回的数据。当数据返回时，我们将触发渲染。
模拟伪异步操作：
模板
输入类型=文本 v-模型=输入值
p从输入框获取的数据：{{ passedInputValue }}/p
/模板
脚本
导出默认值{
名称：“应用程序”，
data(){
返回{
输入值： ，
passedInputValue:“”
}
},
观察：{
输入值(){
inputValue的数据发生变化后，延迟三秒再赋值给passedInputValue。
setTimeout(()={
this . passedinputvalue=this . input value；
}, 3000)
}
}
};
/脚本
此时，你会发现，当你在输入输入框中输入文本时，P标签中的数据并不会立即改变，而是在三秒后呈现出来。
获取前一次的值
在某些情况下，我们需要最新的数据。这时，监听器可以给我们两个值，旧值和新值。
基于前面的情况，我们只需要添加一个参数来获取旧值，代码如下：
观察：{
inputValue(value，oldValue) {
//第一个参数是新值，第二个参数是旧值。你不能改变顺序。
Console.log(`新值：$ { value } `)；
Console.log(`旧值：$ { old value } `)；
}
}
handler方法和immediate属性
我们已经知道，在我们监听的值没有改变的时候不会触发监听器，在页面第一次渲染的时候也不会触发监听器。
但是现在我有了一个在页面第一次呈现时触发监听器的要求。
此时，将使用一个方法和一个属性。
模板
pFullName: {{fullName}}/p
PFI rstname:input type= text v-model= first name /p
/模板
脚本
导出默认值{
名称：“应用程序”，
data(){
返回{
名字：“苏”，
姓氏：“杨君”，
全名：“”
}
},
观察：{
名字：{
处理程序(新名称，旧名称){
this . full name=newName this . last name；
},
//如果设置为false，则在页面第一次呈现后不会触发侦听器。
即时：正确
}
}
};
/脚本
deep 深度侦听
所谓深听，就是听对象内部属性的值。
我们之前使用的监听器只能监听一个变量的变化，(关注代码中的注释)例如：
数据：{
返回{
//字符串改变，所以你可以听
名字：“苏”，
房间：{
名称：大床房，
//房间号变化时，听者听不到。
//因为侦听器只侦听房间，所以它不能侦听号码或名称
数量：302
}
}
},
此时，我们需要深度倾听。
深度拦截在代码上实现并不难，只需要在handler的基础上增加一个深度属性，代码如下：
观察：{
房间：{
处理程序(新房间、旧房间){
Console.log(房间号已更改)
},
深：真的
}
}
案例：利用监听器和定时器实现伪模糊搜索
模板
div class=搜索
输入类型=text v-model=inputValue /
结果中的div class= search-block v-for=(element，index ):key= index
{{ element }}
/div
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
结果：[]，
模拟数据：[
浙江大学，
中国人民大学，
清华大学，
清华大学附属中学，
浙江理工大学，
浙江工业大学
],
输入值：“”
};
},
观察：{
输入值(值){
如果(！值){
setTimeout(()={
this . results=this . mock data . filter(El={
console.log(值)；
return el.indexOf(value)！==-1;
});
}, 300);
}
}
}
};
/脚本
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。