適合的讀者

不知不覺也在匆忙之中來到第十篇，有點跳 tone 的補一下當初第一篇忘了說的「系列文的受眾」，以免大家看到太多廢文內容不夠扎實的文章，浪費太多時間 XD

基本上我認為適合的讀者只有「未來的我」，這次的系列文就只是做一個「個人 side project 的開發筆記」，所以可能有時候會有些偷懶或沒什麼內容，算不上教學文，更不是什麼鑽研技術的優質好文，就只是給我未來開發到一定程度時，回頭看看當初剛開始建這個專案時的一個紀錄而已。

當初原是想藉著鐵人賽起一個做 side project 的頭，不然依照我常犯拖延症的狀況，可能可以再説「我之後會想來做個 side project」說個好幾年。

而因為這一次在開賽前幾乎沒準備的狀況下要做 live development，加上正巧遇上新工作開工，每天實在沒有太多時間要顧及開發進度又顧及文章品質。

所以建議有閱讀到這的讀者可以謹慎考慮繼續往下閱讀，或者也可以繼續跟著我一起看看我的開發歷程，然後發現原來開發有時候也就是這麼樸實無華且枯燥，可能當我有個簡單的 bug 卡住時可以提醒我，或是看看我「偷懶」與「奮發向上」的週期變化。

好拉，預防針打完後，回歸正題，今天還是要繼續來做一點「記帳程式」的進度囉！

今日開發規劃

昨天先把大致上「月記帳本」的畫面弄出一個模糊的樣子，而我自己開發上的習慣都是先整理資料，最後才會刻畫面，所以雖然現在畫面長相還有點醜，但今天會從資料開始串起。

附一下昨天的樣子：

但說到要串資料，一定就要有 API，沒錯，我在前面寫第七篇時，就有想到後面勢必要規劃後端系統架設的細節，這部分等這週末再來研究研究，現在先暫時將假資料放在 store 中使用。

千里之行始於足下，在完成一個完整的記帳程式前，要讓畫面與資料串起來，就先從最基本的「一筆支出紀錄的增刪改查」開始做起。

支出紀錄查詢

這邊將昨天的支出紀錄假資料放到 store 中，之後有 API 後再直接對 store 的資料一次改寫，會比較方便：

@/store/modules/billing.js（連結）

import expenseData from '@/static/billing/expenseData.json'

export const state = () => ({
  expenseData: expenseData
})

export const mutations = {}
export const actions = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

再來，在 BillingList.vue 的地方，用 vuex 的 mapState 將資料引入：

import { mapState } from 'vuex'
export default {
  name: 'BillingList',
  computed: {
    ...mapState({
      expenseData: state => state.billing.expenseData
    })
  }
}

在 vue-devtools 的地方確認資料有沒有成功引入：

支出紀錄新增

昨天在記帳本的上面放了一個「新增紀錄」的按鈕，眼尖的朋友會發現昨天 demo 時沒有按下儲存，因為現在還沒辦法寫入，所以這邊要來寫一個 action 做這件事。

一樣是在 store modeule 中的 billing.js 增加：

export const mutations = {
  ADD_EXPENSE_DATA(state, expense) {
    state.expenseData.push(expense)
  }
}

export const actions = {
  addExpense({ commit }, expense) {
    commit('ADD_EXPENSE_DATA', expense)
  }
}

因為沒有 API 可以做非同步，所以其實這個 action、mutation 看起來有點無意義，但先寫出之後再用 API 的真資料改寫法。

準備好 action 後，就可以在 BillingDialog.vue 的地方的儲存按鈕增加功能了：

methods: {
  handleSubmit() {
    this.$store.dispatch('billing/addExpense', this.form)
    this.dialogFormVisible = false
    this.form = {
      dollar: '',
      type: '',
      title: '',
      account: ''
    }
  }
}

再將這個 method 放到按鈕上就可以用囉：

今天就先做到這邊，我們明天見！