# Modules

Modules are auto-configured to have just the right set of mutations, actions and getters. Generated modules always manage their own loading state, so you don't have to worry about that. They also know as much as possible about communicating with your backend, leaving you free to worry about less boring things like creating awesome user experiences.

# State

The basic state structure is different depending on whether we're dealing with a collection or a single item. Additionally, vuex-json-api offers the capability to handle multiple sets of a collection, in which case all of the below is a little more complicated.


Base state for items

export const item = {
  loading: false,
  item: {},
  initial: {},
  options: {}

Base state for collections

export const collection = {
  loading: false,
  items: {},
  initial: {},
  currentPage: null,
  totalPages: null,
  urlInfo: {},
  options: {}

# The fields


This is the container for the normalized resource objects of the module. If the module is not a collection, there will always only be one item, thus it's singularized.


Once any data-changing mutation is applied to the state, the store will automatically copy the affected resource object into initial. This is always either empty or a map of id => ResourceObject


If the API responses contain pagination information in meta this will be stored in these properties and subsequently used/updated upon navigation

# Mutations

# Default Mutations

Name Description
reset Reset the state of the module to it's initial state
set Set the data for one object
update Change a property of an object
startLoading Enable the loading state of the module*
endLoading Disable the loading state of the module*

On the loading state: Loading state may only indicate loading of a subset of the module.

# Additional Mutations

In addition to the above, some module types may have more mutations:

  • Modules that represent a collection resource get a setPagination mutation which handles pagination meta information according to JSON:API v1.1

  • Modules which have a DELETE route registered to them get a remove mutation

# Calling mutations without dispatching an action

The short answer is "don't do it". Here be dragons and stuff. The longer answer is that you can of course call mutations (by mapping them with mapMutations) in your Vue components but you probably shouldn't. The mutations created by this library handle several intricate edge cases based on agreed-upon input parameters which the actions provided by this library take care in passing. If you're willing to pay very close attention to the parameters any particular mutation expects, go ahead. If not, be aware of the possibly destructive consequences.

# Actions

Name Description
get Get a single item
reset Reset the module state
list Get a list of items
set Set an item's data
update Update an item on the server

# get

# reset

# list

instead of an Id-String, you can pass an Object with an Id-Key and and option key.

Available Options Description
sendUnchangedAttributes If you want to send explicit attributes that are not (necessarily) changed. (accepts an string or array of attributes)
sendFullAttributes To send whole Attributes insead of the changed delta of an Array or Object. (accepts an string or array of attributes)

# set

# update

# Getters