Vue 如何监听 localstorage的变化

需求

分析

1. 初始想法

js 复制代码
computed: {
    lonlat(){
      console.log(localStorage.getItem('lonlat'))
      return localStorage.getItem('lonlat')
    }
  },
  watch: {
    lonlat(newVal,oldVal){
      console.log(1002,newVal,oldVal)
    }
  },

我们想着用 计算属性 computed 和 watch 监听实现,但根本没有监听到

2. 解决方案

第一种方法:

重写setItem事件,当使用setItem的时候,触发window.dispatchEvent派发事件

具体步骤:

  1. 我们写一个dispatchEvent派发事件的js文件,放在一个文件夹里面,比如:utils/tool.js代码如下
js 复制代码
function dispatchEventStroage () {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function (key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage
  1. 在主文件main.js文件中加入一下代码,以便二个vue组件能够触发派发事假
js 复制代码
import tool from './utils/tool.js'
Vue.use(tool)
  1. 在一个vue组件当中向localStorage存储数据,代码如下:
javascript 复制代码
// gsStorename是key名称(存储名称),gsStroe是值,我这里是一个对象,换成json字符串
window.localStorage.setItem('gsStorename', JSON.stringify(gsStore))
  1. 在另一个vue组件当中监听localStorage数据变化,来赋值,监听要写在mounted ()中,代码如下:
    解释:通过addEventListener监听setItemEvent事件来获取新变化的值,e.newValue就是我们的新值,然后用这个值操作其他
javascript 复制代码
  mounted () {
  // 监听localhostStorage的数据变化,结合utils/tool.js配合使用
  const that = this
  window.addEventListener('setItemEvent', function (e) {
      let newdata = JSON.parse(e.newValue)
      that.order = newdata.order
      that.cart = newdata.cart
    })
  },

特别注意:

我刚开始做的时候,考虑不周,没有写const that=this 这一句,我用的如下代码,一直报错,赋值不了,如下代码是错误的,

为什么要用const that=this这一个呢?
那是因为在JavaScript中,this代表的是当前对象,他是会随程序运行不停改变的,
如果用this的话,this是addEventListener监听中当前的对象,所以赋值的时候不能赋值到外面去。

const that = this 其实就是在this改变之前先复制一份给that,那么在程序后面的运行中就可以用that来赋值该函数以外的对象了,比如that.order

第二种方法:用 vuex

利用 const that=this,可以将值存进store中,

javascript 复制代码
this.od2Visible = true;
    this.title = '舰船航线规划';
    this.$store.commit("tools/setzhk", 'od5');
    var tempList = [];
    const that = this;
    var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas); // 创建鼠标事件handler
    handler.setInputAction(function(click) { // 监听鼠标左键点击事件
        // 获取点击位置的地球坐标
        var cartesian = window.viewer.camera.pickEllipsoid(click.position, window.viewer.scene.globe.ellipsoid);
        // 转换为笛卡尔坐标系 
        let cartographic1 = Cesium.Cartographic.fromCartesian(cartesian);
        // 转换为经纬度
        var latitude = Cesium.Math.toDegrees(cartographic1.latitude);
        var longitude = Cesium.Math.toDegrees(cartographic1.longitude);
        tempList.push(longitude,latitude)
          if (cartesian) {
              var entity = window.viewer.entities.add({ // 在该位置添加点
                  position: cartesian,
                  point: {
                      pixelSize: 10,
                      color: Cesium.Color.YELLOW
                  }
              });
              
          }
          localStorage.setItem('lonlan',tempList)
          that.$store.commit("tools/setlonlat", tempList);
          console.log(1001,that)

      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

然后再使用 用 计算属性 computed 和 watch 监听实现

javascript 复制代码
computed: {
    lonlat(){
      return this.$store.state.tools.lonlat
    }
  },
  watch: {
    lonlat(newVal,oldVal){
      console.log(1002,newVal,oldVal)
    }
  },
相关推荐
知识分享小能手39 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one40 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲41 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常4 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json