mpvue采坑记(同一个页面或者组件反复进入动态数据被覆盖)

该问题出现的issue:https://github.com/Meituan-Dianping/mpvue/issues/140

使用场景:

在使用mpvue开发小程序中,出现同路由复用,使用不同页面的情况。

例如:

进入:首页->商品详情页1(id=1)->(商品详情页的推荐商品列表进入)商品详情页2(id=2)->(商品详情页的推荐商品列表进入)商品详情页3(id=3)

退回:商品详情页3(id=3)<-商品详情页2(id=2)<-商品详情页1(id=1)<-首页

问题分析:

通过打断点分析,同路由下的不同页面,数据data的挂载,是共享的...也就是说用的一直都是同一个data,而不是每个页面拥有一个独立的data

解决方案:

使用开源更改后的页面插件包:https://github.com/HelloZJW/mpvue-page-factory

修改使用的mvpue-loader插件以及增加工厂页面插件,

根据mpvue版本修改package.json,详情见修改后的mpvue-loader插件包:https://github.com/jgchenu/mpvue-loader

--package.json

"mpvue-loader": "git+https://github.com/HelloZJW/mpvue-loader.git#patch1.0.x",
"mpvue-page-factory": "^1.0.0",

需要修改 重复使用路由 页面的main.js文件

import pageFactory from ‘mpvue-page-factory‘
import App from ‘./index‘
Page(pageFactory(App))

原文地址:https://www.cnblogs.com/pengzijun/p/10984289.html

时间: 2024-10-26 11:51:37

mpvue采坑记(同一个页面或者组件反复进入动态数据被覆盖)的相关文章

websocket采坑记

项目中想用做个实时统计,像是110警情大屏那种,所以用到了websocket,结果踩了不少坑,再次记录下. 环境:spring,springMVC(4.2.4.RELEASE),tomcat7 问题1:session对象是不一样的 http的时候,是javax.servlet.http.HttpSession 而websocket的时候javax.websocket.Session http的session一般用于保存用户信息,根据用户,http请求的时候携带Cookie:JSESSIONID,

github 采坑记 —— 项目提交到github后部分文件缺失

在使用git push到GitHub上后,发现部分文件缺失,如下图所示: 可以看到dist文件夹为 运行 npm run build 之后打包生成的文件,node_modules 文件也是缺失的 导致文件没有提交的原因是在项目根目录下有个文件: 打开文件: 可以看再提交时有些文件被忽略了,可以将相应代码删除,然后重新push到GitHub上 想要的文件就提交上去了! 多多采坑,多多总结,多多练习~~~ 原文地址:https://www.cnblogs.com/amy2017/p/10087455

使用DocX开源组件,实现动态数据的填充。

1.先解释一下,什么叫做动态数据,动态数据指的是,一条数据的格式固定,但数据的条数不固定. 2.应用环境,在一个表格当中如果,现在表格有三行n列,如果你需要在表格第一行后添加同等规格的一行或n行,应该怎么去做? 3.根据上面的应用环境,不难发现,要完成这项工作的5个过程,1.找到位置.2.获取模板行.3.将模板行添加到当前行的下一行.4.向被添加的行写值.或许会有一个循环过程5.删除模板行. 4.话不多说,上代码. 注意:要使用这个片段,先添加对 DocX组件的引用. DocX项目:http:/

mpvue 采坑

这是第一次用mpvue写项目啊,虽然项目难度不大,但是碰到的问题不小,而且项目还没上线,估计到时候还会碰到问题,所以这篇应该还会更新. 小程序,跟浏览器的环境是有挺多差异的,比如没有window对象,页面也不是在body元素里,而是page元素里,div变成了view,而图片的引入,小程序是没有img标签的,mpvue会自动把img转成小程序的image,有一点比较坑的就是小程序的这个标签的宽高会有预设 width: 320px; height: 240px; 所以你像普通的浏览器里那样,设置一

aidl使用采坑记

什么是AIDL? AIDL是 Android Interface definition language的缩写,它是一种Android内部进程通信接口的描述语言,通过它我们可以定义进程间的通信接口 AIDL可以解决什么问题? 可以实现多个应用程序共享同一个Service的功能,比如:IM服务可以提供给多个APP使用,先在推送基本都是采取这种方案 可以跨进程调用服务里的方法 搭建了简单的Service框架 1.继承Service public class PushService extends S

分布式TensorFlow 采坑记

单机版的TF没毛病,但是当大家在Tensorflow Github里面找到可用的模型,想分布式跑到时候,就会跑出来各种奇怪的问题.我尝试了几种不同构造TF的方式,算是成功渡过了踩坑期,特别记录一下.如果能帮助到各位TF boy最好. 方法一:自己手动写分布式协议 比如logistic regression 在master上运行的伪代码如下 with tf.Session('grpc://vm1:2222') as sess: sess.run(initialization) while not

AWS Redshift 采坑记

1.不要使用快速启动集群的方式建立,否则vpc是一个巨坑 2.要配置对应的Role 并配置化 role arn 原文地址:https://www.cnblogs.com/Johnson-zhao/p/10758126.html

php7采坑记:浮点型数据比较

今天在项目中遇到一个奇怪的问题,经过计算后的double类型的变量的值相等的两个变量进行比较,结果却是不相等. <?php $a=42735.04; $b=17806.2; $c=$a/36; $c=round($c,2); $d=$c*15; echo '$b value is: '. $b ."\n"; echo '$d value is: '. $d ."\n"; if($b == $d){     echo "ok\n"; }els

tensorflow 2.1 采坑记

tf 2.1 安装了好多遍,把python 从3.6 搞到了3.7还是没办法安装成功 问题出在这里 要使用这些新软件包,用户必须安装「Microsoft Visual C ++ Redistributable for Visual Studio 2015.2017 和 2019」,下载地址传送:https://support.microsoft.com/zh-cn/help/2977003/the-latest-supported-visual-c-downloads. 原文地址:https:/