Traditional way to fetch and store data in vuex

traditional-way-to-fetch-and-store-data-vuex.js

const state => () => ({
  cats: {
    loaded: false,
    data: []
  }
})

const mutations = {
  SET_CATS (state, payload) {
    // merge payload with state
    Object.keys(payload).forEach(key => {
      state[key] = payload[key]
    })
  }
}

const actions = {
  async getCats({ commit }) {
    commit('SET_CATS', {
      loaded: false
    })
    const cats = await myAPIRequestToFetchCats()
    commit('SET_CATS', {
      loaded: true,
      data: cats
    })
  }
}