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

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

Vue.use(Vuex)

Define App State

const state = {
  count: 0
}

Define Possible State Mutations

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

Define Callable Actions

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

Create a Vuex Instance

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

Use It in a Vue Component

Template

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

Script

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:

data-flow.md 1.6 KB Histórico Raw