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, ...data };
}
};
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,
actions,
getters,
mutations
};