# Store

# state

The state object is a readonly copy of the current state tree for the given store.

# Example

const {
    state
} = createStore('my-store', {
    firstName: 'John',
    lastName: 'Smith'
});
1
2
3
4
5
6

# getter

The getter function is used for defining computed values based on state

# Arguments

  • name string - The name of the getter
  • getter function - A callback returning the computed state value
    • arguments
      • state readonly object - A readonly copy of state
    • returns: any
    • example: state => `${state.firstName} ${state.lastName}`

# Return Value

A Vue computedopen in new window ref

# Example

const fullName = getter('fullname', state => {
    return `${state.firstName} ${state.lastName}`;
});
1
2
3

# mutation

The mutation function is used for defining a method for mutating a particular part of state and optionally returning a result. The body of the mutation function is the only place in which state is writable.

Mutations are always synchronous.

# Arguments

  • name string - The name of the mutation
  • mutation function - A callback taking state and an optional payload
    • arguments
      • state object - A writable copy of state
      • payload any? - An optional payload provided when invoking the mutation
    • returns: any
    • example: (state, payload) => state.firstName = payload

# Return Value

A mutation function which takes an optional payload and returns the result of the mutator callback defined above.

  • mutation
    • arguments
      • payload any? - An optional payload
    • returns: any

# Example

const setName = mutation('set-name', (state, payload) => {
    state.firstName = payload.firstName;
    state.lastName = payload.lastName;
});
1
2
3
4

# on

The store on function is exactly the same as the global on function except that it's events are filtered to ones only published on the current store.

# once

The store once function is exactly the same as the global once function except it only executes once and it's events are filtered to ones only published on the current store.

# onBeforeMutation

This is convenience method for subscribing to before mutation events on the current store. This is the same as writing:

on('mutation:before', event => {});
1

# Arguments

  • callback function - A callback with a payload as it's only argument
    • arguments
    • returns: void
    • example: payload => console.log(payload)

# Return Value

An EventListener.

# Example

onBeforeMutation(event => {
    if (event.data.mutation === 'set-name') {
        console.log('set-name');
    }
});
1
2
3
4
5

# onAfterMutation

This is convenience method for subscribing to after mutation events on the current store. This is the same as writing:

on('mutation:after', event => {});
1

onAfterMutation has exactly the same signature as onBeforeMutation.

# onMutationError

This is convenience method for subscribing to failed mutation events on the current store. This is the same as writing:

on('mutation:error', event => {});
1

onMutationError has exactly the same signature as onBeforeMutation.