# Vuex Cheat Sheet
```js
new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0,
      },
      getters: {
        square(state) {
          return state.count * state.count
        }
      },
      mutations: {
        increment(state) {
          state.count++;
        },
        setNewValue(state, newValue) {
          state.count = newValue;
        },
      },
      actions: {
        getCountFromApi({ commit }) {
          return someApi.getCount()
            .then((newCount) => {
              commit('setNewValue', newCount);
            });
        },
      },
    },
    // More modules ...
  },
});
```

## State
State is the storage layer.

**Never** manipulate state directly, use a mutation or action for that.

Example accessing the store from a component:

```js
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.counter.count;
    }
  }
}
```
### Accessing State

```js
import store from '../store';

console.log(store.state.counter.count);
```

```js
// in a component method
console.log(this.$store.counter.count);
```

## Getters
Retrieve computed derived state based on the store.

Getter functions receive the following positional arguments:

```
state,       // will be module local state if defined in a module.
getters,     // module local getters of the current module
rootState,   // global state (only available in a module)
rootGetters  // all getters (only available in a module)
```

### Getting a Getter
Root level access:
```js
console.log(store.getters.fooBar);
```

Method style:
```js
getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
```

```js
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
```

Module access:
```js
console.log(store.getters['counter/square']);
```


## Mutations
The only way to change state is through a mutation. Mutations are
**synchronous**.

Mutation functions in the Store receive positional arguments:
  - `state` - Current local state
  - `payload` - Optional payload is whatever (if anything) is passed to
    `commit()`'s second argument.

Mutation functions edit state directly.

```js
mutations: {
  increment(state) {
    state.count++;
  },
},
```

### Commit a Mutation

To invoke a mutation, use the `commit()` function.

```js
this.$store.commit('counter/increment');
```

```js
// With a payload of 22
this.$store.commit('counter/setNewValue', 22);
```

## Actions
Actions are like **asynchronous** mutations.
  - Instead of mutating the state, actions commit mutations.
  - Actions can contain arbitrary asynchronous operations.
  - Return a promise.

Action functions receives positional arguments `context` and `payload`.

`context` looks like this:
```js
{
  state,      // same as `store.state`, or local state if in modules
  rootState,  // same as `store.state`, only in modules
  commit,     // same as `store.commit`
  dispatch,   // same as `store.dispatch`
  getters,    // same as `store.getters`, or local getters if in modules
  rootGetters // same as `store.getters`, only in modules
}
```

`payload` is optional if passed as the second argument to `dispatch()`.

Actions should `commit` any changes via a mutation.
```js
const actions = {
  getCountFromApi({ commit }) {
    return someApi.getCount()
      .then((newCount) => {
        commit('setNewValue', newCount);
      });
  },
};
```

### Dispatch

Dispatch can also take a `payload` as a second argument.

```js
this.$store.dispatch('counter/getCountFromApi');
```