vuex-mutations, by InventiStudio

Factory of vuex mutations. DRY.

Table of Contents

• Install
• Example
• API Documentation

Install

# npm
npm i --save @inventistudio/vuex-mutations
# or yarn
yarn add @inventistudio/vuex-mutations

Example

import Mutations from '@inventistudio/vuex-mutations'

const state = {
  // Prepare state
  me: {
    login: '',
    email: '',
  },
  comments: [],
}

const mutations = {
  // Magic
  SET_USER:          Mutations.set('me'),
  UPDATE_USER_EMAIL: Mutations.set('me.email'),
  ADD_COMMENT:       Mutations.add('comments'),
  UPDATE_COMMENT:    Mutations.update('comments', { matchBy: 'comment_id' }),
  REMOVE_COMMENT:    Mutations.remove('comments', { matchBy: 'comment_id' }),
  ADD_FULL_COMMENT:  Mutations.addOrUpdate('comments', { matchBy: 'comment_id' })
}

const actions = {
  // Do your stuff here. Use mutations.
  SET_USER_ACTION({ commit }, user) {
    commit('SET_USER', user)
  }
  // (...)
}

API

Mutations

Collection of functions that create mutations

• Mutations
  • .add(path, options) ⇒ Mutation(state, element)
  • .update(path, options) ⇒ Mutation(state, element)
  • .addOrUpdate(path, options) ⇒ Mutation(state, element)
  • .remove(path, options) ⇒ Mutation(state, element)
  • .set(path) ⇒ Mutation(state, element)

Mutations.add(path, options) ⇒ Mutation(state, element)

It creates mutation that adds element to array

Kind: static method of Mutations

Param	Type	Default	Description
path	String		Path to array
options	Object
[options.position]	String	'first'	Determine if element should be inserted at the beginning ('first') or end ('last')

Example

const mutations = {
  ADD_USER:        add('users'),
  ADD_USER_AT_END: add('users', { position: 'last' }),
}

Mutations.update(path, options) ⇒ Mutation(state, element)

It creates mutation that updates element of array. It does nothing if not found

Kind: static method of Mutations

Param	Type	Default	Description
path	String		Path to array
options	Object
[options.matchBy]	function | String	(a, b) => a === b	It can by function or propery name

Example

const mutations = {
  UPDATE_BY_REFERENCE:   update('path.to.array'),
  UPDATE_BY_ID:          update('path.to.array', { matchBy: 'id' }),
  UPDATE_BY_CUSTOM_FUNC: update('path.to.array', { matchBy(a, b) { return a.name === b.name } }),
}

Mutations.addOrUpdate(path, options) ⇒ Mutation(state, element)

It creates mutation that updates element of array if found. It adds it if not.

Kind: static method of Mutations

Param	Type	Default	Description
path	String		Path to array
options	Object
[options.position]	String	'first'	Determine if element should be inserted at the beginning ('first') or end ('last')
[options.matchBy]	function | String	(a, b) => a === b	It can by function or propery name

Example

const mutations = {
  UPDATE_OR_ADD_BY_REFERENCE:   addOrUpdate('path.to.array'),
  UPDATE_OR_ADD_BY_ID:          addOrUpdate('path.to.array', { matchBy: 'data.id', position: 'last' }),
  UPDATE_OR_ADD_BY_CUSTOM_FUNC: addOrUpdate('path.to.array', { matchBy(a, b) { return a.name === b.name } }),
}

Mutations.remove(path, options) ⇒ Mutation(state, element)

It creates mutation that removes element from array. It does nothing if not found

Kind: static method of Mutations

Param	Type	Default	Description
path	String		Path to array
options	Object
[options.matchBy]	function | String	(a, b) => a === b	It can by function or propery name

Example

const mutations = {
  REMOVE_BY_REFERENCE:   remove('path.to.array'),
  REMOVE_BY_ID:          remove('path.to.array', { matchBy: 'id' }),
  REMOVE_BY_CUSTOM_FUNC: remove('path.to.array', { matchBy(a, b) { return a.name === b.name } }),
}

Mutations.set(path) ⇒ Mutation(state, element)

It creates mutation that sets object property.

Kind: static method of Mutations

Param	Type	Description
path	String	Path to property

Example

const mutations = {
  SET_SOMETHING: set('path.to.prop'),
}