Example of a Vuex service

CarLoader.js

import Vue from 'vue'
import _ from 'lodash'
import { compare, stringify } from 'utils/query'
import store from 'app/store'

/**
 * Car loader service
 *
 * Removes responsibility of loading cars from the results store
 *
 * @property {boolean} loading
 * @property {string} query
 * @property {string} lastQuery
 *
 * @property {Function} search
 * @property {Function} load
 */
const loader = new Vue({
  data () {
    return {
      lastQuery: '',
      lastGoodState: {},
      loading: false,
    }
  },

  computed: {
    state () {
      return _.cloneDeep(store.get('parameters/search'))
    },
    query () {
      return stringify(this.state)
    },
  },

  methods: {
    /**
     * Search all cars
     *
     * @return {Promise.<TResult>}
     */
    search () {
      this.loading = true
      return store
        .dispatch('results/search')
        .then(() => {
          this.loading = false
        })
    },

    /**
     * Load cars based on current query
     *
     * @return {*}
     */
    load () {
      // new queries, load data
      if (!compare(this.query, this.lastQuery)) {
        this.lastQuery = this.query
        const state = this.state
        this.loading = true
        return store
          .dispatch('results/browse')
          .then(data => {
            this.loading = false
            if (data.results.length) {
              this.lastGoodState = state
            }
            return data
          })
      }

      // same queries, return existing data
      const data = _.pick(store.state.results, 'cars', 'pagination')
      return Promise.resolve(data)
    },

    /**
     * Go back to the last good state
     */
    back () {
      store.set('parameters/search', this.lastGoodState)
    }
  }
})

window.loader = loader

export default loader