前端 Vue.js

Vuex的应用实例 --天气查询应用

利用Vuex实现页面间数据传递 ajax同时发送多个请求

Posted by wantingtr on October 20, 2018

weather

其实是一个很小很简单的demo了，主要就是再熟悉一下ajax和vuex。其中用了和风天气的api，可以精确到行政区划内的天气。因为这里涉及到了在一个页面内同时请求多个页面，以及在涉及到城市和区域之间的各种切换和设定默认值，所以在vuex这一部分还是研究了一下才行。

实现功能：

  1. 手动改变城市和行政区，能查询北京、上海、广州、成都的各区天气预报
  2. 显示行政区的天气情况，包括：实时温度、三天天气预报
  3. 显示行政区的空气情况，包括：空气质量指数、空气质量、主要污染物、PM2.5指数

演示gif

weather

项目地址

基于Vue.js的天气应用demo

使用axios发送ajax

之前主要都是请求单个api，对于这种在同一个页面同时请求多个页面,可以使用axios.all([url1,url2....])

  mounted () {
    var fid = this.$store.state.city.defaultDid
    var cid = this.$store.state.city.cid
    //console.log(cid)
    //同时请求天气预报api和空气质量api
    axios.all([
      axios.get('apiUrl1'),
      axios.get('apiUrl2')
    ]).then(axios.spread((weather, air) => {
      // 上面两个请求都完成后，才执行这个回调方法
      this.temprature = weather.data.HeWeather6[0].now.tmp //实况温度
      console.log(air.data)
      this.dailyForecast = weather.data.HeWeather6[0].daily_forecast //天气预报
      this.today = this.dailyForecast[0]
      this.tomorrow = this.dailyForecast[1] 
      this.afterTomorrow = this.dailyForecast[2]
      this.airCondition = air.data.HeWeather6[0].air_now_city //空气质量
    }))
  }

利用vuex实现跨页面数据共享

对于vuex，主要需要处理：

  1. 通过页面下方按钮切换城市时，顶部区域栏切换到每个城市的默认区域
  2. 点击顶部区域栏，进入并可以选择切换当前城市的行政区域。
  3. 主题页面区域需要与地域变化实时响应

其中，city.json的格式如下

"data": [{
    "index": "01",
    "name": "北京",
    "cid": "CN101010100",
    "defaultDistrict": "朝阳区",
    "defaultDid": "CN101010300",
    "district": [{
      "dName": "海淀区",
      "id": "CN101010200"
    },{
      "dName": "朝阳区",
      "id": "CN101010300"
    }]
  },{
    "index": "02",
    "name": "上海",
    "cid": "CN101020100",
    "defaultDistrict": "静安区",
    "defaultDid": "CN101021400",
    "district": [{
      "dName": "闵行区",
      "id": "CN101020200"
    },{
      "dName": "宝山区",
      "id": "CN101020300"
    }]
  },
  //...

这一部分卡了很久，主要是对于数据之间的关系不清楚。city是一个对象，其中包括了cityId，districtId等等。所以当改变城市时，应该将整个city对象都作为参数传递给vuex，这样才能整体同时改变City和District

//mutaitons.js
export default {
  changeCity (state, city) {
    state.city = city
    state.city.district = city.defaultDistrict
    try {
      localStorage.city = JSON.stringify(city)
    } catch (e) {}
  },
  changeDistrict (state, district) {
    state.city.district = district.name
    state.city.defaultDid = district.id
    try {
      localStorage.city.district = JSON.stringify(district),
      localStorage.city.defaultDid = JSON.stringify(districtid)
    } catch (e) {}
  }
}

对于mutation.js，主要要处理城市和区域的改变。需要注意的是，改变城市时，传递的参数是整个city对象，而改变区域时，整体需要的参数为districtName(页面显示)和districtId(请求api)

//state.js
let defaultCity = {
  index: '02',
  name: '上海',
  cid: 'CN101020100',
  defaultDistrict: '静安区',
  defaultDid: 'CN101021400'
}

try {
  if (localStorage.city) {
    defaultCity = JSON.parse(localStorage.city)
  }
} catch (e) {}

export default {
  city: defaultCity,
  district: defaultCity.defaultDistrict,
  defaultDid: defaultCity.defaultDid
}

在state.js中，主要就是设置初始数据和设置缓存。重点是对于default来说，要设置city，district，defaultDid

处理完vuex的js部分，其他部分就是很简单的页面展示了。但其中有一个是对于mutation要同时传递两个参数（就是districtName和districtId），应该使用对象来传递。

  <div class="list" ref='wrapper'>
      <div class="area">
        <div class="title border-topbottom">当前区域</div>
        <div class="button-list">
          <div class="button">
            
          </div>
        </div>
      </div>

      <div class="area">
        <div class="title border-topbottom">区域选择</div>
        <div class="button-list">
          <div
            class="button border-bottom"
            v-for="item of district"
            :key='item.id'
            @click="changeDistrict({name: item.dName, id: item.id})">
            <!--若参数大于一个，对于click方法应该使用对象来传递参数-->
            
          </div>
        </div>
      </div>
  </div>

    changeDistrict (district, districtid) {
      this.$store.commit('changeDistrict', district, districtid)
      this.$router.push('./')
    }

总结

整体就是一个很简单的demo…对于vue中的数据传递机制还是要多多巩固才行。

FRIENDS