在上一篇中我們使用了土法煉鋼的方式將畫面上的組件一個一個刻出來，
這篇我們來嘗試使用製作component 的方式來完成我們的畫面

測驗畫面

我們先來看看畫面:

我們可以簡單的將畫面分成三個區塊:

1. 受測者資訊區
2. 測驗區
3. 功能列

所以我們將他拆成三部分來開發。

受測者資訊區

我們先將使用者的資訊宣告成全域變數

1. 在 vuex.js 裡面的status新增下列變數:

userInfo:{
            name:"default",
            age : 0,
            sex : "女",
          },

(因為程式碼太長了，所以這邊只給部分。完整程式碼可以上git去觀看)

2. 在 src/components 裡面創建檔案 userInfo.vue
3. 接著在userInfo.vue裡面輸入下方程式碼:
   template:

<template>
  <div id="infomation">
    <div>姓名:<input type="text" @click="setName" /></div>
    <div>年紀:<input type="text" @click="setAge" /></div>
    <div>
      性別:
      <select v-model="selected" @change="setSex">
        <option selected>女</option>
        <option>男</option>
      </select>
    </div>
  </div>
</template>

還記得前面說性別這邊有點問題嗎?
我們如果讓使用者自由輸入的話，可能他會輸入 男、男生、man、女生、female...等。
這會導致我們在建立資料的時候無法統一，所以我們這邊改用下拉式選單的設計，
讓使用者統一選擇 女or男。

<script>
import store from "../vuex"; // 引用 store
export default {
  name: "userInfo",
  store: store,
  data: function () {
    return {
      selected: "女",
    };
  },
  methods: {
    setName(event) {
      var value = event.target.value;
      store.state.userInfo.name = value;
    },
    setAge(event) {
      var value = parseInt(event.target.value);
      store.state.userInfo.age = value;
    },
    setSex() {
      store.state.userInfo.sex = this.selected;
    },
  },
};
</script>

4. 接下來把userInfo加入到test.vue裡面:
   template:

<template>
<userInfo></userInfo>
<div id='starting-game'>
<table>
    <thead>
        <tr>
        <!-- 這部分有一些問題 -->
        <th>目前積分:</th>
    </tr>
    <tr>
        <th>第一副牌</th>
        <th>第二副牌</th>
        <th>第三副牌</th>
        <th>第四副牌</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            
            <td>
                <button>抽牌</button>
            </td>
            <td>
                <button>抽牌</button>
            </td>
            <td>
                <button>抽牌</button>
            </td>
            <td>
                <button>抽牌</button>
            </td>
        </tr>
    </tbody>
</table>
</div>
<div>
    <router-link to='/'>回首頁</router-link>
</div>
<!-- 先不設計結算畫面 -->
<div>
    <router-link to='/settlement' >結算</router-link>
</div>
</template>

將原本寫受測者資訊的部分改為<userInfo></userInfo>
script:

<script>
import userInfo from '../components/userInfo'

export default {
  name: 'test',
  components: {
    userInfo

  }
}
</script>

結語

這篇先做到這裡，下一篇會接著繼續開發 測驗區的部分