weather

其實是一個很小很簡單的demo了，主要就是再熟悉一下ajax和vuex。其中用了和風天氣的api，可以精確到行政區劃內的天氣。因為這裡涉及到了在一個頁面內同時請求多個頁面，以及在涉及到城市和區域之間的各種切換和設定預設值，所以在vuex這一部分還是研究了一下才行。

實現功能：

1. 手動改變城市和行政區，能查詢北京、上海、廣州、成都的各區天氣預報
2. 顯示行政區的天氣情況，包括：實時溫度、三天天氣預報
3. 顯示行政區的空氣情況，包括：空氣質量指數、空氣質量、主要汙染物、PM2.5指數

演示gif

專案地址

基於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">
            {{this.$store.state.city.district}}
          </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方法應該使用物件來傳遞引數-->
            {{item.dName}}
          </div>
        </div>
      </div>
  </div>

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

總結

整體就是一個很簡單的demo…對於vue中的資料傳遞機制還是要多多鞏固才行。