Vuex （vue2.0） 基礎（理解）

相關詞彙認識

1.      devtools 工具

2.      backbend API後臺資料介面文件

3.      actions 動作作用

4.      dispatch 處理

5.      mutation 突變

6.      state 狀態

7.      store 倉庫

核心概念vuex 

Vuex的應用核心就是store，倉庫中包含著應用大部分的狀態。

官方文件中說明vuex的特點有兩個：（相比全域性變數而言）1.vue元件可以訪問store中的state值並且state的改變也可以影響到元件的中某些變數或者是方法執行狀態。2.vue元件不能直接的改變store中的狀態，改變的方式是顯式提交。

注：1.顯示提交？？ 2. 不能直接的改變store中的狀態？？

目前理解：

1.mutations

就像程式碼中所示（這個完全可以對比newvue來理解，state（data）定義變數和mutations(method)方法）

2.不能直接改變的意思是：state 申明的變數不能通過直接獲取的形式進行改變例如：store.state.count++，而是要通過定義方法，呼叫方法，來改變定義的狀態值。例如呼叫下面的increment 方法，程式碼：store.commit('increment')。

/ 如果在模組化構建系統中，請確保在開頭呼叫了 Vue.use(Vuex)

Vuex 簡單例項 

const store =new Vuex.Store({

  state:{

    count:0

  },

  mutations:{

    increment (state){

      state.count++

    }

  }

})

Vuex （vue2.0） 基礎二（理解）

state 單一狀態樹

VUE使用單一的狀態樹，用一個物件包含了全部的應用層級的狀態，並且作為應用唯一的資料來源存在。每一個vue都有並且只有一個store(狀態庫)也就是單一的狀態樹。單一的狀態樹可以讓我們直接定位任意特定狀態片段。（單一狀態樹和模組化並不衝突）

在 Vue 元件中獲得 Vuex 狀態

1.      如何在組建中展示狀態

在vue元件中的計算屬性中返回需要返回的狀態值。如下列子：

// 建立一個 Counter 元件

const Counter ={

  template:`<div>{{ count }}</div>`,

  computed:{

    count (){

      return store.state.count

    }

  }

}

每當store.state.count變化的時候，vue元件都會重新計算屬性，並且觸發更新關聯的DOM

然而這種模式，有些弊端，就是不同元件使用state的時候，在元件中要頻繁的匯入，這個的確好麻煩！！（能不能類似見一個公共的庫，在最起始的位置引入之後，在裡面後需補充所需要的狀態變數，這樣的話也相當於控制所有的狀態! 感覺66噠）

2.      Vuex通過store選項，提供了一種機制（什麼機制看程式碼），將狀態從根元件註冊到每一個元件中。

 Vue.use(Vuex) // 呼叫vuex

const app =new Vue({

  el:'#app',

  // 把 store 物件提供給 “store” 選項，這可以把 store 的例項注入所有的子元件

  store,

  components:{ Counter },

  template:`

    <divclass="app">

     <counter></counter>

    </div>

  `

mapState 輔助函式

一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵：

Ps:什麼是語法糖：

需要宣告的是“語法糖”這個詞絕非貶義詞，它可以給我們帶來方便，是一種便捷的寫法，編譯器會幫我們做轉換；而且可以提高開發編碼的效率，在效能上也不會帶來損失。沒有按照常規語言格式，可以被編譯的簡寫程式碼。