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

Posted 2021-12-24 pengzijun

该问题出现的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))