今天目標：

1. 希望有個可以設定數字的地方。
2. 設定數字會對應到 + / - 按鈕上面
   • 比如設定數字：2，按鈕顯示 +2
3. 新增歸零按鈕，顯示歸 0

count.vue

<template>
  <div class="container">
    <h2 style="color: red;">count: {{ count }}</h2>

    <!-- 1. 增加 input 可以設定數值 model 綁定 num -->
    Set Number: 
    <input type='number' v-model='num' style="width: 50px;"><br/>
    
    <!-- 3. 雙向綁定 num 到按鈕上顯示-->
    <!-- 傳 num 數值給 action -->
    <button @click="actionIncrease(num)">+{{ num }}</button>
    <button @click="actionDecrease(num)">-{{ num }}</button>

    <!-- 4. 新增歸零按鈕 -->
    <button @click="actionCountReset">歸零</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data () {
    return {
      // 2. model num 預設值為: 1
      num: 1
    }
  },
  computed: mapGetters({
    count: 'getCount',
  }),
  methods: {
    ...mapActions([
      'actionIncrease',
      'actionDecrease',

      // 5. 引入歸零 action
      'actionCountReset'
    ])
  }
}
</script>

以下範例只顯示有修改的地方。
有問題可以參考：Day 11 - 計數器 - I

action.js

export const actionIncrease = ({ commit }, num) => {
  /*
   * 第二個參數是接收 Vue 傳遞的 value: num
   * template 上面我們是這們寫的:
   *   @click="actionIncrease(num)"
   */
  console.log('actionIncrease', num);
  // 使用 commit 傳遞 value 給 mutation 計算
  commit(types.INCREASE, num);
}

export const actionDecrease = ({ commit }, num) => {
  console.log('actionDecrease', num);
  commit(types.DECREASE, num);
}

export const actionCountReset = ({ commit }) => {
  console.log('actionCountReset');
  commit(types.COUNT_RESET);
}

action 第二個參數，可以接收 Vue 或其他 action 所帶的 value

value 只有 1 個，如果需要傳遞多個，建議使用 Object 包裝。
第一個參數 { commit }, 我們使用 ES6 解構 直接提取 commit 出來使用。

mutations.js

export const mutations = {
  [types.INCREASE] (state, num) {
    // 第二個參數是接收 commit 傳遞的值: num
    // 計算邏輯，改變 state
    state.count += num;
    console.log('INCREASE', num, 'state?', state.count);
  },
  [types.DECREASE] (state, num) {
    state.count -= num;
    console.log('DECREASE', num, 'state?', state.count);
  },
  [types.COUNT_RESET] (state) {
    // 歸零，就將 state 設定為 0 囉!
    state.count = 0;
    console.log('COUNT_RESET - state?', state.count);
  },
}

可以打開 CHROME 啟動開發者模式(F12)查看 console 觀察 console.log 的順序與 state 的變化。

計數器的範例練習到這邊，主要是初步了解整個 vuex(Flux) 架構的流程。

進階的練習：

• 加上乘除按鈕改變數值
• 實作計算機 :P

接著幾天將會使用經典 todo list 來練習 CRUD

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。