vue + vant 地址设置编辑，默认展示及本地缓存设置；

使用vue 结合vant 组件 编辑地址时，如何让编辑的地址在选中的区域定位设置；结合本地缓存设置再编辑设置；

1.html设置：引入区域js文件:areaList.js

                    <div class="pt-15 plr-15 bg-white">
                        <h3 class="font-15 font-bloder font-black line-height30">收货人信息
                            <span class="right" @click="chooseAddrEdit=false"><van-icon size="24" color="#b8b8b8" name="cross" /></span>
                        </h3>
                        <van-cell-group class="mt-10 pt-15">
                            <van-field v-model="addrEdit.name" label="收货人" placeholder="请填写收货人姓名"></van-field>
                            <van-field v-model="addrEdit.tel" label="手机号" placeholder="请填写收货人手机号"></van-field>
                            <van-field v-model="addrEdit.address" label="收货区域" readonly placeholder="请填写收货人区域" @click="addrChooseShow=true">
                                <van-icon  slot="button" size="18" name="arrow"></van-icon>
                            </van-field>
                            <van-field v-model="addrEdit.addresstext"  type="textarea" rows="1" autosize label="详细地址" placeholder="请填写收货人详细地址"></van-field>
                        </van-cell-group>
                        <div class="plr-15 ptb-15 mt-10 bg-white">
                            <van-button round size="large" @click="onSaveAddrEdit"  class="vant-btn-bluebg" type="info">确定</van-button>
                        </div>
                    </div>

 <!--       区域选择    -->
                <van-popup v-model="addrChooseShow" position="bottom">
                    <van-area
                            :area-list="areaList"
                            :columns-placeholder="['请选择', '请选择', '请选择']"
                            title="收货区域"
                            :value="addrcode"
                            @cancel="addrChooseShow=false"
                            @confirm="addrEditSubmit"
                    ></van-area>
                </van-popup>

js部分设置：

data:{
    chooseAddrEdit:false,//编辑收货人弹框
        addrEdit:{
            name:'',//收货人姓名
            tel:'',//收货人手机号
            address:'',//收货人地址
            addresstext:'',//详细地址
        },
        addrChooseShow:false, //底部打开选择地址状态
        areaList: AreaList,//选择地址内容
        province_name:"",//辅助 省名
        city_name:"", //辅助 市名
        district_name:"",//辅助 市区名
        addrcode:'',//被选中的地址编号；
}

mothed:{
     //首次加载，获取缓存中的数据
        getCacheInfo:function(){
            var that = this; 
            //取收货人的编辑信息；
            let eddre=JSON.parse(window.localStorage.getItem('addrEdit'));
            if(eddre){
                that.addrEdit.name=eddre.name;
                that.addrEdit.tel=eddre.tel;
                that.addrEdit.address=eddre.address;
                that.addrEdit.addresstext=eddre.addresstext;
                if(eddre.vcode[0]&&eddre.vcode[0].name){
                    that.province_name=eddre.vcode[0].name;
                }
                if(eddre.vcode[1]&&eddre.vcode[1].name){
                    that.city_name=eddre.vcode[1].name;
                }
                if(eddre.vcode[2]&&eddre.vcode[2].name){
                    that.district_name=eddre.vcode[2].name;
                }
                if(eddre.vcode[2].code){
                    that.addrcode=eddre.vcode[2].code;
                }else if(eddre.vcode[1].code){
                    that.addrcode=eddre.vcode[1].code;
                }else if(eddre.vcode[0].code){
                    that.addrcode=eddre.vcode[0].code;
                }
            } 
        },
    
    //设置地址时设置缓存；
      addrEditSubmit:function(v){
            var that = this;
            if(v){
                if(v[0]&&v[0].name){
                    that.province_name=v[0].name;
                }
                if(v[1]&&v[1].name){
                    that.city_name=v[1].name;
                }
                if(v[2]&&v[2].name){
                    that.district_name=v[2].name;
                }
            }
            that.addrEdit.address=that.province_name + ' ' + that.city_name +' '+that.district_name;
            that.addrChooseShow=false; 
            //设置收货地址编辑
            let addre={
                name: that.addrEdit.name,
                tel: that.addrEdit.tel,
                address: that.addrEdit.address,
                addresstext: that.addrEdit.addresstext,
                vcode:v,
            };
            let addrEdit=JSON.stringify(addre);
            window.localStorage.setItem('addrEdit',addrEdit);
        },
}

3. 补充上面的缓存方面的内容清除；

 localStorage.removeItem("arrde");//删除指定的缓存；
  localStorage.clear();//清除本地缓存设置；