# Vuex Module

Vuex ORM can define additional Vuex Module state and methods and interact with them.

# Defining State

Within Vuex Store, each Model has a corresponding state tree. For example, if you have User Model, inside Vuex Store would look like this.

{
  entities: {
    users: {
      data: []
    }
  }
}

You can see there's data property under users. Here is where all of the user records will be stored. However, you may add any number of state property other than data and interact with them through Model method.

To define state, define static state property at Model.

class User extends Model {
  static entity = 'users'

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

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

With the above definition, the state inside Vuex Store would become like this.

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

# Mutating State

To mutate state, you may use static commit method in Model.

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

The static commit method receives state object as same as usual Vuex Mutation, and you may mutate any field using the state.

Note that the callback function passed to the commit method is called within the Vuex Mutation handler. Which means, the callback should always follow the rule for the mutations that it must be synchronous.

# Defining Modules

You can register the Vuex Module alongside with Model under the same namespace. Modules are simple Vuex Modules that would correspond to the Models. You are free to add any additional module functionalities such as Actions or Mutations as you wish.

To define and register the module, you can create an ordinary Vuex Module and pass it as 2nd argument to the database.register method.

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

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

database.register(User, users)

WARNING: Do not create state named data. The key name data is reserved, and Vuex ORM will override its value when storing data.

You may interact with the Store as you ordinarily would with Vuex. If you have defined some additional state, getters, actions, and mutations, you can call 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 fom 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.