Frontend State Management with Vue and Vuex : Connecting the weather component to Vuex store

Connecting the weather component to Vuex store

 Building the weather component

In this component, we have a few extra things going on.  There is a form in which we can search for our current city. This triggers an API call that pulls weather data for that particular city.  We display the coordinates of the city on a  google map.  See the main.js  to see how we set up the configuration for the API key etc.  Even though not a requirement, we also use lodash to demonstrate how you can bring in third-party utils into the component. 

<template>
  <div class="widget search">
    <header>
      <h3 class="h6">Search weather</h3>
    </header>
    <form action="#" class="search-form">
      <div class="form-group">
        <input
          type="search"
          placeholder="Search for City"
          v-model="currentCity"
          @change="debounceSearchInput"
        />
        <button type="submit" class="submit">
          <i class="icon-search"></i>
        </button>
      </div>
    </form>
    <div class="pt-5">
      <div class="h6">Currently displaying</div>
      <br />
      <div class="h6 alert alert-warning">City : {{ weatherProps.name }}</div>
      <br />
      <div class="h6 alert alert-success">
        Temperature : {{ convertedTemp(weatherProps) }}
      </div>
      <br />
      <div class="h6 alert alert-info">
        Humidity :{{ getHumidity(weatherProps) }}
      </div>
      <div class="pt-5">
        <gmap-map
          :center="getCenter(weatherProps)"
          :zoom="getZoom()"
          style="width:100%;  height: 400px;"
        ></gmap-map>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { Map as GMap } from "vue-googlemaps";
import { get, debounce } from "lodash";
import { roundN } from "../helpers/weather-helper";
export default {
  name: "Weather",
  data() {
    return {
      currentCity: "Kumasi"
    };
  },
  created() {
    this.getWeatherData(this.currentCity);
  },
  computed: {
    ...mapState({
      weatherProps: ({ currentWeather: { currentWeather: _currentWeather } }) =>
        _currentWeather
    })
  },
  methods: {
    ...mapActions(["getWeatherData"]),

    convertedTemp: weatherProps =>
      (roundN(get(weatherProps, "temp", 0), 2) - 273.15).toFixed(2),

    getHumidity: weatherProps => get(weatherProps, "humidity", null),

    getCenter: weatherProps => ({
      lat: get(weatherProps, "coord.lat", 0),
      lng: get(weatherProps, "coord.lon", 0)
    }),

    getZoom: () => 7,

    debounceSearchInput: debounce(function(event) {
      this.currentCity = event.target.value;
      this.$store.dispatch("getWeatherData", this.currentCity);
    }, 500)
  },

  components: {
    "gmap-map": GMap
  }
};
</script>

<style scoped>
.list-group-item {
  font-weight: "bold";
  border: 0;
}
</style>

course logo
Frontend State Management with Vue and Vuex
Number of sections:
15
Content length:
Delivery formats:

Instructor

F Yeboah
I am a Software / UI developer with interests in Search Intensive applications, Information Architectures(IA), UX/UI, FRP, and Reusable Frontend Components Design.... Show more