vuex-asr/docs/step-by-step-guide/mutations.md

* Version: 0.7.52 * License M.I.T. * [Online Documentation](https://vuex-asr.github.io/vuex-asr/) * author: Joris Wenting * email: vuex.asr@gmail.com * [linkedIn](https://www.linkedin.com/in/joriswenting/). * [contribute](https://vuex-asr.github.io/vuex-a

# mutations

Vuex offers a great way to mutate state items with the use of mutations and actions. Vuex-asr enables you to bind those actions and mutations the same way you could bind [state](./hello-world-example.html) and [getters](getters-example.html) by the component's attributes. In this chapter we discuss the use of mutations.

::: tip codesandbox
[mutations](https://codesandbox.io/s/manual-mutations-6q5d6)
:::

## vuex mutations in a nutshell

Mutations are methods used in the store to change/mutate the state and keep track of those changes/mutations. Read more about mutations in the [vuex guide/mutations](https://vuex.vuejs.org/guide/mutations.html).

::: tip TIP
Keeping track of mutations is very helpful for debugging. It's recommended to download the [vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) for chrome. If you go to the `Vuex` tab, you'll see your mutations and state. 
:::

## the store

Let's take a look at the following store,

```js{5,8,9,10}
// src/vuex/store.js

export default new Vuex.Store({
  state: {
    message: "message in the root of the store",
  },
  mutations: {
    setMessage(state, message) {
      console.log("message was mutated with: ", message);
      state.message = message;
  }
  }
});
```

## creating a two way binding with a state item and a mutation

We bind a state item and a mutation to a component

```vue{7}
 // src/App.vue
 
 <template> 
 
   <example-component-with-event-handler
     asr-bind-state="message"
     asr-bind-mutations="setMessage"
   />

 </template>
  
  ...
```

The component now has state item `message` and method `setMessage` available:

```vue{6}
// src/components/ExampleMessageWithEventHandler.vue

<template>
  <div class="example-component-with-event-handler">
    <p class="message">{{ message }}</p>
    <input v-bind:value="message" @keyup="setMessage">
  </div>
</template>
```
Notice we bind the message to the value of the input and an event-handler that get's triggered at keyup.

And voila we have a nice two way binding at our hands implementing a mutation.

## aliasing

Since we are also able to alias our mutations we could easily reuse this component to create an instance with other store bindings:

asume we have:
```js{6,13-16}
// src/vuex/store.js

export default new Vuex.Store({
  state: {
    message: "message in the root of the store",
    anotherMessage: "another message in the root of the store"
  },
  mutations: {
    setMessage(state, message) {
      console.log("message was mutated with: ", message);
      state.message = message;
    },
    setAnotherMessage(state, message) {
      console.log("anotherMessage was mutated with: ", message);
      state.anotherMessage = message;
    }
  }
});

```

now we could bind the component like this with our `alias syntax`:

```vue{7,8}

 // src/App.vue
 
 <template> 
 
  <example-component-with-event-handler
    asr-bind-state="anotherMessage AS message"
    asr-bind-mutations="setAnotherMessage AS setMessage"
  />

  </template>
  
  ...
```

## namespacing
Namespacing is discussed in more detail [here](./namespacing.html), but for convenience below an example with a mutation:

```vue{6,7}
 // src/App.vue
 
 <template> 
 
  <example-component-with-event-handler
    asr-bind-state="GENERAL/anotherMessage AS message"
    asr-bind-mutations="GENERAL/setAnotherMessage AS setMessage"
  />. 

  </template>
  
  ...
```

::: tip TIP
read more about [namespacing](./namespacing.html)
::: 

### next step

When we need multiple mutations to happen or do asynchronous actions, we use actions, read all about it in the next chapter.