Markcook2.0，使用Vue2.0和Vuex2.0進行徹底重構升級

隨着Vue2.0的正式推出，我也正好籍此機會對個人開源項目Markcook進行重構。這一次重構既打發了我在高速路上堵車的無聊時光，又加深了對Vue2.0和Vuex2.0使用的認識，可謂一舉多得。

---

項目地址：https://github.com/jrainlau/m...
在線地址：http://jrainlau.github.io/mar...
桌面程序下載（僅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並無像其餘的編輯器同樣提供「保存進度」的功能。其實Markcook會在你輸入的過程當中自動地爲你保存內容，這樣即便你把頁面關掉，在下一次打開Markcook的時候，你會發現你以前的內容仍然留在原地。

深刻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進行維護。

謝謝你們~