Vuex Orm Plugin: Axios

Vuex ORM Axios plugin adds the smooth integration between API request call and Vuex ORM persistent through awesome Axios.

User.api().get('/api/users')

Documentation

You can check out the full documentation for Vuex ORM Axios at https://vuex-orm.github.io/plugin-axios.

Questions & Discussions

Join us on our Slack Channel for any questions and discussions.

Although there is the Slack Channel, do not hesitate to open an issue for any question you might have. We're always more than happy to hear any feedback, and we don't care what kind of form they are.

Quick Start

Here's a very simple quick start guide that demonstrates how it feels like to be using Vuex ORM Axios.

Install and Setup Vuex ORM Axios

Install Vuex ORM Axios by npm or yarn. Note that the Vuex ORM Axios require Axios to be installed manually, so don't forget to install it too!

$ npm install axios @vuex-orm/core @vuex-orm/plugin-axios

$ yarn add axios @vuex-orm/core @vuex-orm/plugin-axios

To plugin Vuex ORM Axios to Vuex ORM, pass Vuex ORM Axios to the VuexORM.use method. Here, you should pass your axios instance as an option.

import axios from 'axios'
import VuexORM from '@vuex-orm/core'
import VuexORMAxios from '@vuex-orm/plugin-axios'

VuexORM.use(VuexORMAxios, { axios })

Usage

After setting up Vuex ORM Axios, you may use Model.api method to perform api call.

User.api().get('/api/users')

Vuex ORM Axios can perform all basic Axios requests, which is get, post, put, patch, delete, and request. These methods take the same arguments as Axios and perform exactly as same as Axios, except it's going to store response data to the store corresponding to the Model that is calling the api.

Vuex ORM Axios lets you define the "Custom Actions" as well. Like this.

class User extends Model {
  static entity = 'users'

  static fields () {
    return {
      id: this.attr(null),
      name: this.attr('')
    }
  }

  static apiConfig = {
    actions: {
      fetch: {
        method: 'get',
        url: '/api/users'
      }
    }
  }
}

And then, you can use the above fetch method through your model.

User.api().fetch()

Now, are you ready to learn more about the plugin? Let's jump right into it.

Plugins

Vuex ORM can be extended via a plugin to add additional features. Here is the list of available plugins.

Vuex ORM GraphQL – The plugin to sync the store against a GraphQL API.
Vuex ORM Search – The plugin adds a search() method to filter records using fuzzy search logic from the Fuse.js.
Vuex ORM Change Flags - Vuex ORM plugin for adding IsDirty / IsNew flags to model entities.
Vuex ORM Soft Delete – Vuex ORM plugin for adding soft delete feature to model entities.

Contribution

We are excited that you are interested in contributing to Vuex ORM Axios! Anything from raising an issue, submitting an idea of a new feature, or making a pull request is welcome!

Development

$ yarn build

Compile files and generate bundles in dist directory.

$ yarn lint

Lint files using a rule of Standard JS.

$ yarn test

Run the test using Jest.

$ yarn test:watch

Run the test in watch mode.

$ yarn coverage

Generate test coverage in coverage directory.

License

The Vuex ORM Plugin Axios is open-sourced software licensed under the MIT license.

innovate-invent/plugin-axios