前端除虫记

前几天,在工作中遇到了一个业务上的bug,具体情境就是,在一个页面对表格进行还原数据后,切换到表格页,依旧显示还原前的数据,刷新一下才会正常。

页面组件的结构如下

1
2
3
4
5
6
7
.
├── ReportStep.vue
│   └── Profile.vue
│   └── Profile.vue
│   └── PubVerCard.vue
└── TableStep.vue
   └── TableDesigner.vue

其中在ReportStep中创建了一个Vuex实例,Profile中也创建了一个Vuex实例。

还原数据的操作在PubVerCard中,还原后会执行this.$store.commit('init',response.body)

表格在TableStep页面中的TableDesigner中,TableDesigner中有一个计算属性

1
2
3
4
computed: mapState({
columnConfigs: state => state.table.config.columnConfigs,
tableConfig: state => state.table.config
}),

Profile创建的实例将ReportStep中的实例覆盖了,导致PubVerCard中还原的数据只把Profile中的数据还原了,而表格的数据是从ReportStep中获取的,所以只是在切换路由的时候,不会触发ReportStep中的created,故切换回去时,数据还是还原之前的数据。

当刷新时,ReportStep重新加载,触发created,使整个页面从后台重新获取数据,导致数据又恢复正常。