开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 25 天，点击查看活动详情
- 添加和编辑共用同一个页面，所以页面的title是动态的，有时候是添加，有时候是编辑，就可以通过vuex进行管理。
- 包括表单里的数据也是一样的，如果是添加功能，那么表单里的数据绑定formData里面只有key，value都为空，如果是编辑，那么就需要给这个对象赋值，进行表单的数据回显，所以这个也可以通过vuex管理。
- vuex代码如下：（根据不同模块对store进行模块化）
goods.js文件模块
store下的inxdex.js文件，把goods模块导入进来
首先添加页面的title，要从store中读取，利用computed计算属性
下面是在add页面做的事情
<temeplate>
<div>{title}页面</div>
</template>
data(){
return {
fileList:[],//存放图片的容器
formData:{
name:'',
price:'',
desc:'',
imgList:[],
...
}
}
},
computed:{
...mapState('goods',['title','goodsData']);
}，
因为添加页面是一个单独的页面，所以在编辑的时候，要从store里拿goodsData数据，在mounted里做一下数据回显，保证这时候是一定拿到了数据。
上面对图片进行了数据回显，
<el-upload>组件接收fileList属性，它的值是一个数组，格式为：
[ { url:'字符串地址' }, { url:'字符串地址' }, ...]
图片添加的时候也要对图片进行处理的，一般传给后端的数据都是字符串，图片传成功的话会调用一个成功的回调
每次传递给父组件，父组件都会放到
formData的imgList里。
还有商品描述，使用的是wangEditor这个编辑器，可以对编辑器进行各种配置：
1、依赖安装
2、模板使用
3、可以在
data里进行配置
逻辑实现：
把编辑器部分封装成单独的组件，作为add页面的子组件使用，可以在onChange事件里，把this.html传递给父组件，并赋值给的formData.desc属性。
传值的话可以使用自定义事件。
上面就是在添加中和编辑中可能涉及到的问题，其他表单数据的收集都通过add页面<el-form>组件自动收集了。只有在做图片的时候会有一些问题。
