關於vue、vuex的一些初步小結

1、Vue組件的建立

通常語法：

Vue.component(tagName, options)

• 務必在根組件實例化以前註冊組件

組件options說明：

• data: 必須是一個函數，目的在於返回獨立的對象，保證組件之間的數據不互相影響
• components: 局部註冊一個組件，僅在當前組件做用域內可用
• props: 用於父組件向子組件傳遞數據時使用，可傳靜態屬性，也可傳動態的（數據綁定，父組件數據變化引發子組件數據相應變化），一次性傳遞全部屬性可採用v-bind指令
• computed: 計算屬性，在部分狀況下能夠代替watch的功能，也可用於:class的動態綁定
• watch: 即屬性偵聽器，接受參數newData, oldData，含義顧名思義
• methods: 定義組件內的方法
• 生命週期函數：beforeCreate, created, beforeMount, mounted, updated, beforeDestroy, destroyed，其具體含義可參照官方文檔

2、組件間數據傳遞

來看看文檔裏一段值得參考的語法（位置：組件-自定義事件-.sync修飾符）：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

• :foo="bar"即父組件向子組件傳遞屬性foo，vue中採用單向數據流，這裏是爲了讓父組件的數據和數據的改動（如有的話）傳遞到子組件上，供子組件使用
• update爲vue生命週期函數，在數據變化前調用
• 這裏update部分事實上爲v-on的縮寫，做用是監聽子組件中foo的改變並調用對應的處理器
• 子組件向父組件發佈事件(emit)會觸發父組件設置的監聽器（若是你設置了的話）

好了，這裏涉及的概念可能比較多，因此再多解釋一下吧～爲了邏輯上更加清新，vue是不推薦子組件改變父組件的數據的，主要是出於維護成本的考慮，這就是所謂的單向數據流。父組件能夠經過改變prop影響子組件數據，而子組件能夠經過emit觸發父組件方法。

可是，若是這樣的數據傳遞不單單限於父子組件之間，而是祖先與後代組件或是兄弟組件呢？顯然這會是一件很麻煩的事，爲了處理這種多狀態、多通訊的情形，咱們引入了vuex。

3、vuex的使用

若是你以前使用過flux、redux等狀態狀態管理工具的話，那麼應該會很容易理解這個工具是要作什麼～

下面依次介紹一下state、mutation和action這三個核心概念：

state

是一個持久化存儲的狀態，不歸屬於vue的某個特定組件，除非刷新頁面，不然數據不會消失～

在根實例中註冊store，下發到全部子組件，使用以下：

computed: {
  count () {
    return this.$store.state.count
  }
}

若是想要簡化定義，使用mapState輔助函數就可，使用時從vuex引入該方法就可。

mutation

state的值不能直接被操做，想要改變它必須經過提交mutation的形式進行，方式爲：

store.commit('something', payload)

注意一下第二個參數，這是以載荷形式提交參數，參數最多一個，想傳多個參數的話必須以對象的形式提交。

mutation只能是同步函數，緣由是devtool沒法捕捉異步函數的快照。

action

爲了執行異步操做，vuex引入了action來完成這一工做，調用方式是用dispatch方法，簡化寫法與state和mutation是相似的，值得看看的是將它和es6的promise和es7的async與await結合起來的工做原理：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

這個action返回了一個Promise對象，能夠在後續進行處理，同時action中也能夠調用其餘異步action。

除了這三個概念外，還有getter（類比計算屬性，用於從state派生出一些值）、module（分割較大的狀態樹，便於管理）。

處理表單可手動監聽input、change或是使用帶setter的雙向綁定計算屬性。