11-添加收货信息

在新增地址的弹窗组件中：
首先，增加新地址，就要把所有的信息储存到一个变量中 : receive。
新增的内容要添加到receiveInfo(vuex)中，格式也是一致的。

1. 在组件中建立一个变量，和数据格式保持一致，然后用指令绑定到标签上。

======
//组件中
 data() {
      return {
        receive : {
            'name': '',
            'phone': '',
            'areaCode': '',
            'landLine': '',
            'provinceId': 0,
            'province': '',
            'cityId': 0,
            'city': '',
            'countyId': 0,
            'county': '',
            'add' : '',
            'default': false
        }
      }
 }
====
然后将这些数据绑定到对应的标签上

2. 省份，城市，自己模拟一个数据,图示：

   
   屏幕快照 2018-03-13 下午10.08.00.png
   

   2-1 首先绑定省份数据。直接绑定即可。

<option :value="province.area_id" v-for="province,index in addList">
  {{province.area_name}}
</option>

2-2 点击省份的时候，就要显示渲染赌赢的城市信息，需要做一个计算。

这个计算很重要，是这一步实现了真正的绑定数据，
首先需要拿到数据，并挂载。然后循环这个数据，先对比省份ID，并绑定。然后我们需要做一个计算，当省份对应上之后，可以新建一个数组，然后将这个省份对应的城市列表赋值给这个数组，页面上去绑定这个数组即可。

// 监控countryId
 watch: {
          'receive.countyId'(){
             this.countyList.forEach((county) => {
                    // 当循环数据中的省份ID对应上当前的标签上绑定的数据的ID
                    if(county.area_id === this.receive.countyId){
                        this.receive.county = county.area_name
                        return
                    } 
                })
          },
}，
computed: {
            // 点击省份，渲染对应城市
            cityList(){
                let cityList = []
                this.addList.forEach((province) => {
                    // 当循环数据中的省份ID对应上当前的标签上绑定的数据的ID
                    if(province.area_id === this.receive.provinceId){
                      // 改变对应的receive的数据
                      this.receive.province = province.area_name
                      cityList = province.city_list
                      return
                    } 
                })
                if(this.receive.provinceId === '0'){
                    this.receive.cityId = 0
                    this.receive.countyId = 0
                }
                return cityList
            },
            // 点击城市，渲染对应区县
            countyList(){
                let countyList = []
                this.cityList.forEach((city) => {
                    // 当循环数据中的省份ID对应上当前的标签上绑定的数据的ID
                    if(city.area_id === this.receive.cityId){
                        // 改变对应的receive的数据
                        this.receive.city = city.area_name
                        countyList = city.county_list
                        return
                    } 
                })
                if(this.receive.cityId === '0'){
                    this.receive.countyId = 0
                }
                return countyList
            }
        },
========
<option :value="province.area_id" v-for="province,index in addList">
  {{province.area_name}}
</option>
<option 
  :value="city.area_id" 
  v-for="city,index in cityList">
  {{city.area_name}}
</option>

3. 验证每项信息是否填写
   首先需要定义一个变量，isRight。写一个方法inspectReceive，判断receive每一项都有内容，就是验证通过。什么时候时候判断（执行inspectReceive）？在receive的每一项都被改变（都添加内容的时候），所以需要将receive进行深度监控。要监控每一项改变，所以就要在点击的时候去改变receive里面对应的值。

data() {
            return {
                isRight:false  //判断每项信息是否填写正确
            }
        }
}
=========
//computed中
            // 验证每条信息是否正确：依次判断receive的值
            inspectReceive(){
              if(this.receive.name && !this.phoneError && this.receive.province && this.receive.city && this.receive.county && this.receive.add){
                this.isRight = true
              }else{
                this.isRight = false
              }
            }
========
        watch: {
          receive : {  // 当receive有变化的时候执行一次验证
            handler(){ //方法
              this.inspectReceive()
            },
            deep:true //是否深度监控
          }
        }

4.点击按钮提交新增的地址信息
如果每一项都验证通过了，就提交vuex中的submitReceive，这个函数做的事情是：先判断当前数据是否点击了设置为默认地址的按钮，如果点击了，就循环之前默认的已有的两条地址：receiveInfo，目的是将这两个数据的default都设置为false.然后将当前的这个data，push到receiveInfo中。
难点：如果勾选了，怎么设置当前这条信息是默认选中的状态？
如果用watch，发现根本监控不到。所以用了一个笨办法：提交之后，窗口就关闭了，那么在关闭的时候，重新去改变index值，就可以了。就等于是局部初始化了一下。
created通常用于初始化某些属性值，然后再对视图进行渲染。在这里用created是为了要把默认地址做一个初始化，让默认地址在渲染的时候为被选中状态。

// 提交订单页
    created(){
        this.$store.state.receiveInfo.forEach((receive,index) => {
            if (receive.default) {
                this.receiveIndex = index
                return
            }
        })
    }
// vuex
// 提交新的地址
    submitReceive (state,data) {
      if (data.default) { // 是否勾选设置为默认地址按钮
        state.receiveInfo.forEach((receive) => {
          receive.default = false
        })
        state.receiveInfo.push(data)
      }
    }
// 提交新增地址信息
  submitReceiveHandle(){
    if(this.isRight){
      this.$store.commit('submitReceive',this.receive)
      this.$emit('close')
     }
  }