Vuex ORM

# Vuex Module

You can define complimentary Vuex state and interactions, in parallel to the state generated by Vuex ORM for each model, which can be handled directly by various model methods.

Since each model entity has a corresponding state tree in Vuex, you can define additional state directly on a model (see Defining State below).

You can also define scoped state, getters, mutations and actions within an entity module (see Defining Modules below).

# Defining State

In the following example, the User model has a fetching state by defining the static state method returning an object containing the arbitrary state:

class User extends Model {
  static entity = 'users'

  static state ()  {
    return {
      fetching: false
    }
  }

  static fields () {
    return { ... }
  }
}

The above state definition will appear within the entity module, adjacent to data.

{
  entities: {
    users: {
      fetching: false,
      data: [ ... ]
    }
  }
}

# Retrieving State

You can retrieve model state in the same manner in which you would retrieve state from a Vuex store. For example, you can retrieve the fetching state within a computed option as such:

export default {
  computed: {
    isFetching() {
      return this.$store.state.entities.users.fetching
    }
  }
}

Or use the Vuex mapState helper to define computed options:

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('entities/users', {
      isFetching: (state) => state.fetching
    })
  }
}

# Mutating State

The static commit method can be called directly on a model to perform state mutation:

User.commit((state) => {
  state.fetching = true
})

The method receives a state object for the corresponding entity namespace, as you would in general Vuex mutation methods, and you can mutate any data within the sub tree.

NOTE

The callback function passed to the commit method is called within a Vuex mutation handler therefore must always be synchronous. Details.

# Defining Modules

You can register a Vuex Module alongside a model under the same namespace. You can add any additional module functionalities including getters, mutations and actions.

Create an ordinary Vuex Module and pass it as second argument to the Database register method:

const users = {
  state: {
    count: 0
  },

  mutations: {
    add (state, count) {
      state.count = state.count + count
    }
  }
}

database.register(User, users)

IMPORTANT!

Do not create state named as data. The state name is reserved by Vuex ORM which stores model data and will be overridden during installation.

You can interact with the store as you ordinarily would with Vuex. If you have defined any additional state, getters, actions, or mutations, you can access them through the Vuex Module syntax:

const users = {
  state: {
    count: 0
  },

  mutations: {
    add (state, count) {
      state.count = state.count + count
    }
  }
}

// Get state.
const count = store.state.users.count

// Commit mutation.
store.commit('entities/users/add', 3)

# Call Module Methods from Model

An alternative to calling store methods directly, you may access the store instance from a model as well to dispatch actions or call getters.

const user = User.dispatch('add', 3)

The above code is exactly same as below.

store.dispatch('entities/users/add', 3)

By calling Module methods from Model, you can omit full namespace path since Vuex ORM knows where the Model is registered.

# Accessing Store Instance

You can access the store instance via the store method.

const store = User.store()

To get store from Model instance, you must use $store method.

const user = new User()

const store = user.$store()

# Dispatching Actions

You can dispatch an action via the dispatch method. The dispatch method in the model will automatically be namespaced, so you don't have to pass in the root namespace or entity name as an argument.

// As static method.
User.dispatch('someAction')


// As instance method.
(new User()).$dispatch('someAction')

As you can see, in the above example we didn't call the dispatch action as entities/users/someAction, because the entities/users part is generated by the model.

# Calling Getters

You can call getters via the getters method. Be aware that getters in the model should be called as a method, not via the array accessing syntax.

// As static method.
const user = User.getters('getSomething')

// As instance method.
const users = (new User()).$getters('getSomething')

The same as actions, getters in the model is also namespaced automatically.

← Lifecycle Hooks →