# Date Flow

Let's build a simple counter app with Vuex to get a better understanding of the data flow inside Vuex apps. Note this is a trivial example solely for the purpose of explaining the concepts - in practice you don't need Vuex for such simple tasks.

### Setup

``` js
// vuex.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
```

### Define App State

``` js
const state = {
  count: 0
}
```

### Define Possible State Mutations

``` js
const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}
```

### Define Callable Actions

``` js
const actions = {
  increment: 'INCREMENT',
  decrement: 'DECREMENT'
}
```

### Create a Vuex Instance

``` js
export default new Vuex({
  state,
  mutations,
  actions
})
```

### Use It in a Vue Component

**Template**

``` html
<div>
  Clicked: {{ count }} times
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
</div>
```

**Script**

``` js
import vuex from './vuex.js'

export default {
  computed: {
    // bind to state using computed properties
    count () {
      return vuex.state.count
    }
  },
  methods: {
    increment: vuex.actions.increment,
    decrement: vuex.actions.decrement
  }
}
```

Here you will notice the component itself is extremely simple: it simply displays some state from the Vuex instance (not even owning its own data), and calls some vuex actions on user input events.

You will also notice the data flow is unidirectional, as it should be in Flux:

<p align="center">
  <img width="600px" src="https://raw.githubusercontent.com/vuejs/vuex/master/docs/en/vuex.png">
</p>