Vue.jsでFizzBuzzを書いてみる ref: http://qiita.com/tamanugi/items/dc12cb48a2a1d2340e72

App.vue

<template>
  <div id="app">
    <fizz-buzz></fizz-buzz>
    <buttons></buttons>
  </div>
</template>

<script>
import FizzBuzz from './components/FizzBuzz'
import Buttons from './components/Buttons'

export default {
  name: 'app',
  components: {
    FizzBuzz,
    Buttons
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Buttons.vue

<template>
  <div class="buttons">
    <button @click="increment" >+</button>
    <button @click="decrement" >-</button>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  methods: mapActions([
    'increment',
    'decrement'
  ])
}
</script>

file0.txt

# vue-cli をインストール
$ npm install --global vue-cli
# "webpack" ボイラープレートを使用した新しいプロジェクトを作成する
$ vue init webpack vue-fizzbuzz
# 依存関係をインストールしてgo!
$ cd vue-fizzbuzz
$ npm install
# vuexをインストール
$ npm install --save vuex
$ npm run dev

file1.txt

src
├── App.vue
├── components
│   ├── Buttons.vue
│   └── FizzBuzz.vue
├── main.js
└── store.js

FizzBuzz.vue

<template>
  <div>
    <div v-if="fizzbuzz">{{ fizzbuzz }}</div>
    <div v-else>{{ $store.state.count }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: mapGetters([
    'fizzbuzz'
  ])
}
</script>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 1
}

const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

const actions = {
  increment: ({commit}) => commit('increment'),
  decrement: ({commit}) => commit('decrement')
}

const getters = {
  fizzbuzz: state => {
    let message = ''
    if (state.count % 3 === 0) message += 'Fizz'
    if (state.count % 5 === 0) message += 'Buzz'

    return message
  }
}

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