Vue.js用のFluxライクなライブラリVuexを試してみる ref: https://qiita.com/nasum/items/b2f11a392bf8fb125610

actions.js

export default {
  addTodo: 'ADD_TODO'
}

file1.txt

:actions.js
export default {
  addTodo: 'ADD_TODO'
}

index.js

import Vue      from 'Vue';
import TextForm from './components/TextForm.vue';
import ToDoList from './components/ToDoList.vue';
import store    from './store/';

window.onload = function(){
  var main = new Vue({
    el: "body",
    data: store.state,
    components: {
      "text-form": TextForm,
      "to-do-list": ToDoList
    }
  })
}

mutations.js

export default {
  ADD_TODO (state, text) {
    state.todos.push(text)
  }
}

TextForm.vue

<template>
  <div>
    <input type="text" v-model="input" @keyup.enter="addTodo"/>
  </div>
</template>

<script>
  import store from '../store/';

  export default {
    props: ['input'],
    methods: {
      addTodo: function(e){
        var text = e.target.value;
        store.actions.addTodo(text);
        e.target.value = '';
      }
    }
  }
</script>

ToDoList.vue

<template>
  <ul>
    <li v-for="todo in todos">{{todo}}</li>
  </ul>
</template>

<script>
  export default {
    props: ['todos']
  }
</script>