Vuex xhr state

Use Vuex to manage the state of you're ajax calls.

• Keep data from ajax calls in your Vuex store
• Track the state of an individual network load calls in your Vuex store
• Only fetch data when needed and not already fetching

This package is still in development.

instalation

npm

npm install vuex-xhr-state

yarn

yarn add  vuex-xhr-state

Example

Could be outdated and incomplete feel free to ask questions on gitter (ricky-rick) or e-mail

Store module file logs/index.js

export const xhrLogList = new VuexXhrGet({
  method: (id) => { return api.getAllLogs(id) },
  default: [],
  cache: true,
  store: {
    ...
  },
})
 
export const logs = new VuexXhrCreator('logs', [ xhrLogList ])

Store

import VueXhrState from 'vuex-xhr-state'
import { logs } from './logs/'
 
Vue.use(VueXhrState)
 
const xhrPlugins = [
  logs,
]
 
export default new Vuex.Store({
  plugins: [
    ...xhrPlugins.map((plugin) => plugin.plugin()),
  ],
})

Component

    import { mapActions } from 'vuex'
    import { xhrLogList } from '@/store/logs'
    import { mapXhrGetters } from 'vuex-xhr-state'
    
    export default {
     computed: {
       ...mapXhrGetters({
         logs: xhrLogList.mapData(),
         isLoading: xhrLogList.mapPending(),
       }),
       isLoading: function () {
         return xhrLogList.pending(this.$store.getters)
       },
     },
     methods: {
       ...mapActions({
         fetchLogs: xhrLogList.fetch(),
         forceReload: xhrLogList.forceFetch(),
       }),
     },
     created () {
       this.fetchLogs()
       /**
        * or with custom error handling
        * if the closure returns true the error will not apear in the global VXS store
        */
       const errorHandler(error => {
         return true
       }) 
       this.fetchLogs({ errorHandler })
     },
    }