vue中怎么實時監聽本地存儲

這篇文章主要介紹“vue中怎么實時監聽本地存儲”，在日常操作中，相信很多人在vue中怎么實時監聽本地存儲問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中怎么實時監聽本地存儲”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

如何實時監聽本地存儲

在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監聽數據變化

監聽數據變化，在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>

此時你就會發現，當你在input輸入框中輸入文字以后，p標簽內的數據不是立馬改變，而是過三秒才會去渲染。

獲取前一次的值

在某些場景中，我們會需要上一次的數據，此時，偵聽器就可以給我們兩個值，舊值和新值。

在上一個案例的基礎上，我們只需要添加一個參數，即可獲取舊值，代碼如下：

watch:{
    inputValue(value,oldValue) {
        // 第一個參數為新值，第二個參數為舊值，不能調換順序
        console.log(`新值：${value}`);
        console.log(`舊值：${oldValue}`);
    }
}

handler方法和immediate屬性

前面我們已經知道，當我們偵聽的值沒有發生改變的時候，是不會觸發偵聽器的，并且，頁面第一次渲染的時候也不會觸發偵聽器。

但是現在我有個需求就是要讓頁面第一次渲染的時候就去觸發偵聽器呢？

此時就要用到一個方法和一個屬性。

<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>

deep 深度偵聽

所謂深度偵聽就是偵聽對象內部屬性的值。

我們之前用的偵聽器都只能偵聽一個變量的變化，（重點看一下代碼中的注釋）例如：

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>

到此，關于“vue中怎么實時監聽本地存儲”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！