Vue中怎么实时监听本地存储
2022-05-09 09:14:03
如何实时监听本地存储
在main.js中
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。
watch的基本用法
在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：
从请求接口到返回数据，这中间需要一定的时间，此时我们就可以用侦听器来侦听返回的数据，当数据返回以后，我们再触发渲染。
模拟一个伪异步操作：
获取前一次的值
在某些场景中，我们会需要上一次的数据，此时，侦听器就可以给我们两个值，旧值和新值。
在上一个案例的基础上，我们只需要添加一个参数，即可获取旧值，代码如下：
前面我们已经知道，当我们侦听的值没有发生改变的时候，是不会触发侦听器的，并且，页面第一次渲染的时候也不会触发侦听器。
但是现在我有个需求就是要让页面第一次渲染的时候就去触发侦听器呢？
此时就要用到一个方法和一个属性。
所谓深度侦听就是侦听对象内部属性的值。
我们之前用的侦听器都只能侦听一个变量的变化，（重点看一下代码中的注释）例如：
深度侦听在代码上并不难实现，只需要在handler的基础上添加一个deep属性，代码如下：
在main.js中
Vue.prototype.$addStorageEvent = function (type, key, data) {
if (type === 1) {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
localStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent);
}
}
return storage.setItem(key, data);
} else {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent);
}
}
return storage.setItem(key, data);
}
}
this.$addStorageEvent(2, "butCountNum", this.butCount);
在mouted钩子函数中进行监听
window.addEventListener('setItem', (e) => {
if(e.key === "butCountNum"){
//写逻辑
}
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。
watch的基本用法
在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：
<script>
export default {
name: "app",
// 数据
data() {
return {};
},
// 方法
methods:{},
// 侦听器
watch:{}
};
</script>一个简单的例子：
<template>
<p>你点击按钮的次数是： {{ count }} </p>
<button @click="add" v-model="count">点击</button>
</template>
<script>
export default {
name: "app",
data(){
return {
count:0
}
},
methods:{
add(){
this.count++;
}
},
watch:{
// 被侦听的变量count
count(){
console.log('count 发生了变化');
}
}
};
</script>从请求接口到返回数据，这中间需要一定的时间，此时我们就可以用侦听器来侦听返回的数据，当数据返回以后，我们再触发渲染。
模拟一个伪异步操作：
<template>
<input type="text" v-model="inputValue">
<p>从输入框中获取到的数据：{{ passedInputValue }}</p>
</template>
<script>
export default {
name: "app",
data(){
return {
inputValue: '',
passedInputValue: ''
}
},
watch:{
inputValue() {
// 当inputValue数据发生变化以后，延迟三秒赋值给passedInputValue
setTimeout(() => {
this.passedInputValue = this.inputValue;
}, 3000)
}
}
};
</script>获取前一次的值
在某些场景中，我们会需要上一次的数据，此时，侦听器就可以给我们两个值，旧值和新值。
在上一个案例的基础上，我们只需要添加一个参数，即可获取旧值，代码如下：
watch:{
inputValue(value,oldValue) {
// 第一个参数为新值，第二个参数为旧值，不能调换顺序
console.log(`新值：${value}`);
console.log(`旧值：${oldValue}`);
}
}前面我们已经知道，当我们侦听的值没有发生改变的时候，是不会触发侦听器的，并且，页面第一次渲染的时候也不会触发侦听器。
但是现在我有个需求就是要让页面第一次渲染的时候就去触发侦听器呢？
此时就要用到一个方法和一个属性。
<template>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</template>
<script>
export default {
name: "app",
data(){
return {
firstName: 'Su',
lastName: 'Junyang',
fullName: ''
}
},
watch:{
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
// 如果设置了false，那么在页面第一次渲染以后不会触发侦听器
immediate: true
}
}
};
</script>所谓深度侦听就是侦听对象内部属性的值。
我们之前用的侦听器都只能侦听一个变量的变化，（重点看一下代码中的注释）例如：
data:{
return {
// 字符串发生变化，可以侦听
firstName: 'Su',
room:{
name:"大床房",
// 当房号发生变化的时候，侦听器并不能侦听到。
// 因为侦听器只侦听到room，不能侦听number或者name
number: 302
}
}
},深度侦听在代码上并不难实现，只需要在handler的基础上添加一个deep属性，代码如下：
watch:{
room:{
handler(newRoom,oldRoom){
console.log("房间号发生了变化")
},
deep: true
}
}<template>
<div class="search">
<input type="text" v-model="inputValue" />
<div class="search-block" v-for="(element, index) in results" :key="index">
{{ element }}
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
results: [],
mockData: [
'浙江大学',
'中国人民大学',
'清华大学',
'清华大学附属中学',
'浙江理工大学',
'浙江工业大学'
],
inputValue: ''
};
},
watch: {
inputValue(value) {
if (!!value) {
setTimeout(() => {
this.results = this.mockData.filter(el => {
console.log(value);
return el.indexOf(value) !== -1;
});
}, 300);
}
}
}
};
</script>
