寫於 2016.10.02
隨著Vue2.0的正式推出，我也正好籍此機會對我的開源專案Markcook進行重構。這一次重構既打發了我在高速路上堵車的無聊時光，又加深了對Vue2.0和Vuex2.0使用的認識，可謂一舉多得。
專案地址：github.com/jrainlau/ma… 線上地址：jrainlau.github.io/markcook/ 桌面程式下載（僅windows）：markcook2.0-win32-x64.zip
什麼是Markcook？
在上一個版本中我寫了一篇文章，叫做Markcook 1.2，超輕的開源markdown編輯器，但是仍然缺乏對Markcook的一個完整的定義。在2.0版本中，Markcook的定義是：
A smart and beautiful markdown editor.
一個聰明且好看的markdown編輯器。
更新內容
2.0版本使用了Google的Material Design作為設計規範，對UI部分進行了完全的重構，提供了更加方便的操作，同時在視覺上也更加舒適。對於使用者體驗也有著更為詳細和人性化的設計，在最大限度上提供最舒適的編輯環境。
新版本允許多工操作，這意味著你可以通過Markcook同時開啟多個markdown檔案，在側邊欄中可以方便地進行切換：
你可以通過拖拽檔案的方式把檔案直接新增到Markcook的工作空間當中：
最大的變化，在於工具欄的升級。你可以通過點選工具欄的按鈕，在頁面中插入markdown格式的語句，或者直接把一段文字變成markdown格式：
深入Markcook
2.0版本使用了Vuex2.0作為全域性的狀態管理工具，元件之間完全解耦，可以方便地進行維護和定製，其主要目錄結構如下：
|__ index.html
|__ src
|__ App.vue
|__ components
|__ inputer.vue
|__ navBar.vue
|__ outputer.vue
|__ sideMenu.vue
|__ main.js
|__ vuex
|__ store.js
複製程式碼可以看到，Markcook被拆分成了5個元件，包括一個根元件App.vue以及4個放在/components資料夾下的功能性元件。元件之間的狀態完全通過/vuex/store.js進行管理，其過程可以通過下面的架構圖說明：
store.js裡面進行，下面簡要分析一些關鍵功能的實現原理：
-
輸入的內容進入
store.js，經過處理後實時輸出到output.vue，以實現同步輸入輸出的效果。 -
每一篇文章都是一個物件，裡面有三個屬性：
id，content，current。在store.js內部有一個articleList陣列，專門用來存放文章物件。每次新建檔案，都會往陣列內新增一個新的文章物件，在切換檔案的時候，只需要根據對應的ID切換文章物件的current屬性即可。 articleList: [ { id: createID(), content: 'Untitled\n---\n', current: true } ] -
文章的自動儲存進度功能，是通過
localStorage實現的。每一篇文章都在localStorage裡面根據ID分配了位置，在輸入的過程中會實時更新對應ID下的內容。同時在localStorage裡面有一個叫idArr的物件，專門用於存放文章的ID。文章的自動讀取等操作，都是根據idArr獲取文章ID，再獲取對應ID下的文章內容來實現的。
更詳細的內容請直接閱讀原始碼，由於篇幅有限，在這裡就不作過多的介紹了。
後記
在高速公路上一遍堵車一邊coding的感覺真的很神奇，在完全沒有網路沒法google的情況下，反而大大激發了獨立思考的能力，真是受益良多。
最想多說的反而是UI設計。Material Design是我最喜歡的設計風格，在上一版本中已經有所使用了，但還是醜。這一版雖然和專業設計師比起來還是會有很大差距，但是對我來說，著實是順眼了很多，也不枉我即使在睡覺也在思考Markcook2.0應該長什麼樣。
升級到Vue2.0，在開發體驗上並沒有太大的變化，反而是Vuex2.0的使用讓我稍微有些不習慣，因為它和舊版本的用法有著比較大的不同。不過得益於文件的詳細，在仔細閱讀了文件以後，遇到的問題基本都能夠得以解決。經過一定的開發摸索，發現Vuex2.0其實會更容易理解和使用，因為它把store，mutation，action和getter都放在了一起，在元件中只需要通過this.$store就能夠對store進行操作，邏輯非常清晰易懂，所以也很容易理解為什麼我專案中每一個元件的邏輯都非常簡單，程式碼量也非常少。
由於水平有限，專案程式碼難免會有錯漏和不完美的地方，非常期待能夠得到大家能夠建議，後續也將繼續對Markcook進行維護。
謝謝大家~