Frontend State Management with Vue and Vuex : Setting up Vuex store to manage weather data from the API

Setting up Vuex store to manage weather data from the API

Next step we show how to set up the store for data coming from the weather API

Similar to the news module, we set up two objects to store data for the success and failure scenarios.  Import the relevant mutations and API configuration information that we need. 

import * as appConstant from "../../constants/appConstants";
import * as types from "../../constants/mutation-types";

const weatherDataState = {
currentWeather: {},
weatherError: {}

We set up our actions to commit our data retrieved from the API to the store. 

const actions = {
  async getWeatherData({ commit }, city) {
    try {
      const response = await fetch(appConstant.WEATHER_API_URL_ENDPOINT + city);

      if (!response.ok) {
        throw Error(response.statusText);
      commit(types.GET_WEATHER_SUCCESS, {
        data: await response.json()
    } catch (error) {
      commit(types.GET_WEATHER_FAILURE, error);

Our mutations again are simple, we assign whatever error message we get from the API call to our state object and likewise assign a successfully retrieved weather data to our state in the store.

const mutations = {
  [types.GET_WEATHER_FAILURE](_, error) {
    weatherDataState.weatherError = error;

  [types.GET_WEATHER_SUCCESS](state, { data }) {
    weatherDataState.currentWeather = { ...state, };

Again we set up our getter for the success case and leave the implementation of the error case to you as an exercise

const getters = {
  getWeatherState: () => () => {
    return weatherDataState.currentWeather;

Finally, we export our functionality from the file as done previously.

export default {
  state: weatherDataState,


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


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