上一篇與客戶討論完我們的畫面之後，開始正式開發客戶提出的功能。

設定畫面

首先我們來看看畫面上有哪些參數:

我們可以透過這個畫面設定我們遊戲中的參數，並透過這些參數影響遊戲進程。

既然我們要傳遞參數，這時候就可以派出我們的vuex套件了，

1. 先來在vuex.js內新增以下變數:

import { createStore } from 'vuex'

 const store = createStore({
    state () {
        return {
          gameTimes:100,
          cardInfo:{
            first:{
              reward:{
                count:50,
                dividend : 100,
              },
              penalty:{
                count:50,
                dividend : -100,
              }
            },
            second:{
              reward:{
                count:50,
                dividend : 100,
              },
              penalty:{
                count:50,
                dividend : -100,
              }
            },
            third:{
              reward:{
                count:50,
                dividend : 100,
              },
              penalty:{
                count:50,
                dividend : -100,
              }
            },
            fourth:{
              reward:{
                count:50,
                dividend : 100,
              },
              penalty:{
                count:50,
                dividend : -100,
              }
            },
          }
        }
      },
      mutations: {
        
      },
  actions: {}
})


export default store

用gameTimes紀錄執行的次數，
reward 和 penalty 分別記錄獎懲的數量及所代表的積分。
順便給上了一些預設值。

2. 接著在setting.vue設定我們的事件處理
   template:

<template>
  <!-- 遊戲流程區塊 -->
  <div id="game-flow">遊戲執行次數: <input id='game_times' type="text" @change="setValue" /></div>
  <div id="card-setting">
    <table>
      <thead>
        <tr>
          <th>項目</th>
          <th>數量</th>
          <th>積分</th>
        </tr>
      </thead>
      <tbody>
        <!-- 第一副牌 -->
        <tr>
          <td colspan="3">第一副牌</td>
        </tr>
        <tr>
          <td>獎勵</td>
          <td>
            <input id="first_reward_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="first_reward_dividend" type="text" @change="setValue" />
          </td>
        </tr>
        <tr>
          <td>懲罰</td>
          <td>
            <input id="first_penalty_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="first_penalty_dividend" type="text" @change="setValue" />
          </td>
        </tr>
        <!-- 第二副牌 -->
        <tr>
          <td colspan="3">第二副牌</td>
        </tr>
        <tr>
          <td>獎勵</td>
          <td>
            <input id="second_reward_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="second_reward_dividend" type="text" @change="setValue" />
          </td>
        </tr>
        <tr>
          <td>懲罰</td>
          <td>
            <input id="second_penalty_count" type="text" @change="setValue" />
          </td>
          <td>
            <input
              id="second_penalty_dividend"
              type="text"
              @change="setValue"
            />
          </td>
        </tr>
        <!-- 第三副牌 -->
        <tr>
          <td colspan="3">第三副牌</td>
        </tr>
        <tr>
          <td>獎勵</td>
          <td>
            <input id="third_reward_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="third_reward_dividend" type="text" @change="setValue" />
          </td>
        </tr>
        <tr>
          <td>懲罰</td>
          <td>
            <input id="third_penalty_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="third_penalty_dividend" type="text" @change="setValue" />
          </td>
        </tr>
        <!-- 第四副牌 -->
        <tr>
          <td colspan="3">第四副牌</td>
        </tr>
        <tr>
          <td>獎勵</td>
          <td>
            <input id="fourth_reward_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="fourth_reward_dividend" type="text" @change="setValue" />
          </td>
        </tr>
        <tr>
          <td>懲罰</td>
          <td>
            <input id="fourth_penalty_count" type="text" @change="setValue" />
          </td>
          <td>
            <input id="fourth_penalty_dividend" type="text" @change="setValue" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <router-link to="/test">確定</router-link>
  </div>
  <div>
    <router-link to="/">回首頁</router-link>
  </div>
</template>

把每個input都給他一個id，當文字改變時，觸發setValue()事件

script:

<script>
import store from '../vuex' // 引用 store
export default {
  name: "setting",
  store:store,
  components: {},
  methods: {
    setValue(event) {
      var value =  parseInt(event.target.value) 
      switch (event.target.id) {
        //遊戲次數
        case "game_times":
          store.state.gameTimes = value
          break;
        //第一副牌
        case "first_reward_count":
          store.state.cardInfo.first.reward.count = value
          break;
        case "first_reward_dividend":
          store.state.cardInfo.first.reward.dividend = value
          break;
        case "first_penalty_count":
          store.state.cardInfo.first.penalty.count = value
          break;
        case "first_penalty_dividend":
          store.state.cardInfo.first.penalty.dividend = value
          break;
          //第二副牌
        case "second_reward_count":
          store.state.cardInfo.second.reward.count = value
          break;
        case "second_reward_dividend":
          store.state.cardInfo.second.reward.dividend = value
          break;
        case "second_penalty_count":
          store.state.cardInfo.second.penalty.count = value
          break;
        case "second_penalty_dividend":
          store.state.cardInfo.second.penalty.count = value
          break;
          //第三副牌
        case "third_reward_count":
          store.state.cardInfo.third.reward.count = value
          break;
        case "third_reward_dividend":
          store.state.cardInfo.third.reward.dividend = value
          break;
        case "third_penalty_count":
          store.state.cardInfo.third.penalty.count = value
          break;
        case "third_penalty_dividend":
          store.state.cardInfo.third.penalty.dividend = value
          break;
          //第四副牌
        case "fourth_reward_count":
          store.state.cardInfo.fourth.reward.count = value
          break;
        case "fourth_reward_dividend":
          store.state.cardInfo.fourth.reward.dividend = value
          break;
        case "fourth_penalty_count":
          store.state.cardInfo.fourth.penalty.count = value
          break;
        case "fourth_penalty_dividend":
          store.state.cardInfo.fourth.penalty.dividend = value
          break;
        
        default:
          console.log(`Sorry, we are out of ${event.target.id}.`);
      }
    },
  },
};
</script>

引用store 並將每個修改過的數值記錄到對應的store變數中。

這樣我們就可以順利設定遊戲中的參數了。

結語

今天的程式碼選擇比較冗長的方式來撰寫，
雖然看起來比較嚇人，不過這樣的寫法對於剛開始做開發的人來說可以比較容易進入狀況，
另一方面也可以讓有能力的小夥伴試試看修改程式碼來做優化。
例如，重覆的部分如何做成component變成自己的元件、如何限制文字方塊只能輸入數字
這些方向小夥伴們都可以自己試著修改看看。

Git : https://github.com/kyminjob72/iowa_gambling_task/tree/version03
(p.s.如果只想做後續優化練習的，也可以直接去git clone下來)