最近做了一个项目，先展示一下效果
大概就是这样，左边的菜单栏中的一个模块叫年检报告，其中包含了另一个菜单，在这个年检报告子模块中中，包含了28个菜单栏，我这边是用 router-view 配合 element 的 el-menu 写的，所以28个菜单就有28个页面，每一个页面里面都是一个form表单，除了几个可编辑的table，其他的表单内容大部分都是input el-radio el-select 等，比较简单，
难点就在于，数据的存储和回显，项目的需求是，如果填完所有的内容，关闭页面后再进来，之前填写的数据还要能回显，后端的接口是我自定义传参，传什么就返回什么
所以我的大体思路就是将 整个 $data 当作参数传给后端
具体实现思路如下：
给28个子页面混入mixin
mixin代码如下：
beforeRouteLeave(to, from, next) {
this.$emit('getMessage', this.$data, this.$route.path)
next((vm) => {
});
},
当离开当前页面时，调用父组件的 getMessage 方法，同时传递 $data 以及当前路由的地址
为什么要传递当前路由的地址呢，因为我传递给后端的值是 JSON 类型，所以用当前路由的path 当作 key 值，保证key值的独一无二
在父组件中接受 router-view 传递的值
<div class="navContent">
<router-view @getMessage="showMessage(arguments)"></router-view>
</div>
showMessage(val) {
const id = localStorage.getItem("taskId");
let key = val[1];
let value = val[0];
let data = this.$store.state.annual.data;
if (data.hasOwnProperty("step4")) {
console.log("有step4");
data.step4[key] = value;
saveInfo(data, id).then((res) => {
});
} else {
console.log("没有step4");
let step4 = {
};
step4[key] = value;
data.step4 = step4;
saveInfo(data, id).then((res) => {
});
}
},
首先 获取传递过来的两个参数 一个是 $data，还有一个是 path， 分别做为 key 和 value，先从vuex中获取一下之前保存的JSON数据 data 这个data就是前几步传给后端的值，因为一共有5个步骤需要传递数据，所以我给data
定义的key值为 step1 step2 等，当前是第四步，所以就是step4
然后判断一下当前的data是否有 step4 这个key，如果有说明在步骤4中已经保存过数据了，那么只需要向 data.step4 中添加一个 key value ，每一个key 就是 28个子页面的路由地址 value 就是每个字页面对应的 $data
如果没有step4 这个 key，说明步骤4目前还没有存任何数据，就定义一个空对象，向这个空对象中添加 key value，同上，然后将step4 添加到 data 中，这就是整个保存数据的思路
下面再说一下数据回显的思路：
如果按照我上面的方法做保存数据的话，那么数据的回显就是一件非常简单事情，因为你保存的时候传递的是整个 $data，所以回显的时候只需要将 $data 整个替换掉就行
代码如下：
async mounted() {
const id = localStorage.getItem('processId')
await getProcessForm(id).then((res) => {
this.$store.commit('annual/setData', res.data.formData)
});
let vuexData = this.$store.state.annual.data
if (vuexData.hasOwnProperty('step4')) {
let data = this.$store.state.annual.data.step4
Object.keys(data).forEach(item => {
if (this.$route.path == item) {
Object.assign(this.$data, data[item])
}
})
} else {
return
}
},
首先通过 getProcessForm 接口获取后端返回的 data，这个data就是之前说的 你怎么传后端就怎么返回，获取之后，将data存在vuex 中，后面获取可以直接通过vuex获取 不用再调一遍接口
接着判断一下当前的data是否含有 step4 这个 key，如果有，说明data 中有 step4 说明目前step4 中已经存过值，
let data = this.$store.state.annual.data.step4
此时的这个 data 内的 数据格式应该是这样
data: {
"path1": $data1,
"path2": $data2
}
就是上文中保存数据的格式 ，通过 Object.keys 遍历出 step4 的key 值，然后遍历这个 key 值组成的数组，如果当前的路由地址（this.$route.path）等于 item 就将 item（路由地址）对应的 value 值 赋值给当前页面的 $data，需要注意的是 $data 不能直接修改，不然vue会报错，需要用 Object.assign 修改目标对象 $data
Object.assign(this.$data, data[item])
总结：这次开发由于页面和表单非常多，如果按照传统方法，提交给后端的都是 目标form，也是可以做的，但是会有很多重复代码，如果按照 保存 $data 再获取 $data 进行替换，28个页面的所有保存和回显的代码只需要写在 mixin 中，在页面混入就行，大大减少代码量，维护也很方便