westore update()更新数据时需要注意的问题

一 问题复现

  1. 正常显示的页面
    在这里插入图片描述
  2. 点击城市,跳转到带有动态索引的城市选择页面,选择一个城市如北京后,再次换个选择,重新进入页面,两条数据都变为新选择的数据。

页面跟踪打印如下,发现数组被替换了
在这里插入图片描述

二 问题追踪

  1. console.log是异步的…orz

首先尝试在控制台打印数据 console.log
打印着居然发现,console.log是异步的。但凡打开后的数据,是旧数据,未打开时,是新数据------惊讶不已
因此控制台其实只是指向了对象的引用,当点击打开时,才去执行

参考文章

文章里说,首先明确一点,a所储存的是一个引用类型值的地址,所有对a的操作都会具体到这个地址指向的对象上。
其次,**console并不是JavaScript提供的对象,而是浏览器的控制台提供的。**这具体到不同的浏览器,比如Chrome中是由Devtool的控制台提供,Firefox中是由Firebug的控制台提供。

但其实我是打开了控制台的,只是未打开数组,这应该是个bug吧

  1. 打断点看看westore在update前后发生了什么变化
    store.js中的全局变量
    在这里插入图片描述
    页面代码&&调用westore之前的数据
    在这里插入图片描述
    可以看到,这里adminCities还是 上海北京 这两个item。

调用westore的update之后
在这里插入图片描述
数据变为 上海 上海 这两个item。

三 思考

1. 考虑是全局变量定义时格式不标准导致

更改selectedCity格式如下:

第一种:selectedCity: { text: '', value: '' }
第二种:selectedCity: {text: null, value: null }

关于这个问题,做了一系列的猜想

比如,当selectedCity被赋值为null时,再给他赋值北京,selectedCity内存地址里增加的是指向北京的指针。
当再给selectedCity赋值上海时,westore内部的diff算法会将这两条item数据进行对比,对不一样的部分进行数据替换,也因此数组被改写。
westore的diff算法也就是用来进行页面的局部刷新。

但是,当selectedCity改写为上述两种格式后,没有用…
在这里插入图片描述

2. 方向2:考虑是selectedCity赋值格式错误,导致westore的混乱

	let selectedCity = this.store.data.adminCities[event.target.id];
    this.store.data.selectedCity = {
      text: selectedCity.text,
      value: selectedCity.value
    }
    this.store.update();

好了…

该json串脾气有点大,一不小心还迁怒他人

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值