Vue详细分析二级联动的省份城市通过后台获取数据

Vue的二级联动——省份关联城市通过后台返回数据

省份和城市的vue文件

    <el-form-item label="选择地区">
      <el-select v-model="nowProvince" placeholder="请选择省份" @change="selectedProvince">
        <el-option
          v-for="(item,index) in selectProvinceForm"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="personSought.value1" placeholder="请选择地区" ref="location">
        <el-option
          v-for="(item,index) in selectCityForm"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>

js文件

data() {
      // 省份
      selectProvinceForm:[],
      // 城市
      selectCityForm:[],
      nowProvince:'',
}
mounted() {
    // 发请求,得到省份的数据
    this.$store.dispatch("provinceList").then((res)=>{
      const arr = this.$store.state.seekfamily.provinceList;
      arr.forEach(val=> {this.selectProvinceForm.push({
          value: val.id,
          label: val.name,
        })
      });
    })
  },
methods: {
    // 省份选择后联动获取省份下的城市数据，@change绑定的
    async selectedProvince() {
      const {nowProvince} = this;
      this.selectCityForm = [];
      this.$store.dispatch("selectedProvince",{province:nowProvince}).then(()=>{
        const arr = this.$store.state.seekfamily.cityList;
        arr.forEach(val => {this.selectCityForm.push({
          value:val.id,
          label:val.name
        })});
      })
    },
}

api

import requests from './request';

// 获取省份的接口
export const getAreas = () => requests({
    url: `/areas/allProvince`,
    method: 'get'
})

// 获取城市的接口
export const getCity = (params) => requests({
    url: `/areas/getCity`,
    params,
    method: 'get'
})

vuex

import {reqSeekFamily,getAreas,getCity} from '@/api/seek'
// seekfamily模块的小仓库
// state：仓库存储数据的地方
const state = {
    provinceList:[],
    cityList:[]
};
// mutations：修改state的唯一手段
const mutations = {
    PROVINCELIST(state,provinceList) {
        state.provinceList = provinceList;
    },
    SELECTEDPROVINCE(state,cityList) {
        console.log(state.cityList);
        console.log(cityList);
        state.cityList = cityList;
    }
};
// actions：处理actions，可以书写自己的业务逻辑，处理异步任务
const actions = {
    // 获取所有省份的数据
    async provinceList({commit}) {
        let result =  await getAreas();
        console.log(result.data);
        if (result.code == 200) {
            commit('PROVINCELIST',result.data.provinceList);
        }
    },
    // 获取二级联动城市的数据
    async selectedProvince({commit},province) {
        let result = await getCity(province);
        console.log(result.data);
        if (result.code == 200) {
            commit('SELECTEDPROVINCE',result.data.cityList);
        }
    },
    // 发布寻亲信息的数据
    async seekFamily({commit},userData){
        let result = await reqSeekFamily(userData);
        console.log(result);
    },
    // 搜索寻亲信息的数据
    async SearchInfo({commit},userInfo){
        let result = await getSearchInfo(userInfo);
        if (result.code == 200) {
            commit('SEARCHINFO',)
        }
    }
};
// getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {};
export default {
    // Vuex的配置对象，key值不能瞎写
    state,
    mutations,
    actions,
    getters
}

swagger

问题1：获取城市，cityList是空的？

因为我传的参数不对，0=210000。
看一下request URL（上图所示），而后端需要传的是province=210000。

正确传参

1. vue
   dispatch要传参，{province:nowProvince}，进行一个参数整理，province是根据后端的request url拼接的要求来的
   const {nowProvince} = this
   

vue 中的const {XXX } =this 的作用效果

const {comment,index,deleteComment} = this 
上面的这句话是一个简写，最终的含义相当于
const comment = this.commentconst  
const index = this.indexconst   
const deleteComment = this.deleteComment

dispatch的详解

支持载荷Payload和对象Object2种方式进行分发，那多参数应该也有2种传参方式，分别如下：

载荷Payload
在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation会更易读。

     this.$store.dispatch("changeComps", {
            comps: this.comps,
            allPluginsComps: this.allPluginsComps,
          });

对象Object

     this.$store.dispatch({
           type:"changeComps", 
           comps: this.comps,
           allPluginsComps: this.allPluginsComps,
         });

3. store下

4. api下

整个代码思路

element展示部分

• v-model的值value具体是什么呢？
  nowProvince是省份的id，也是item.value的值是省份的id，和nowProvince的值是一样的，具体参考element。
  

store文件

• vuex的state，设置provinceList是空数组。

const state = {
    provinceList:[],
    cityList:[]
};

js逻辑

• 获取省份数组，建立一个arr，来存储省份列表的数据。
  const arr = this.$store.state.seekfamily.provinceList
  
• value：val.id是省份的id号，遍历arr之后，它成为selectProvinceForm其中的一个对象。
• 用forEach进行遍历，遍历一个就用push方法往进加。
• id和name是根据swagger后端的参数来写
  

参考

swagger的数据

api文件

后端接口拿到的数据，参数要对照swagger来写：result.data.provinceList