關於vuex

vuex就是使用一個store對象包含全部的應用層級狀態（全部數據的來源）。

 

store 的四個屬性：state， getters, mutations, actions 。

分解以下：

一、State(倉庫):就是存放的變量的，放在state={}對象裏。可使用 mapState 輔助函數幫助咱們生成計算屬性。

換句話說，整個APP的數據就是存放在 state對象裏，隨取隨用。

 

2.getters上簡單來講就是存放一些公共函數供組件調用。須要對store中的數據進行處理，或者進行重複使用，getters能夠理解爲vue的計算屬性。

getters獲取 store當中的數據做予組件使用，可是這個屬性我在項目中不是特別經常使用。我通常都是這樣獲取

computed: {

      ...mapGetters([

           ‘testDate'

       ])

}

 

例子：

let store = new Vuex.Store({   

     state: {

       testData: 123

    },

    getters: {       

          dateCount(state, getters) {

                let date = state.testDate;

                return `data+1`;

            }

   }

});

 

或者

let { mapGetters } from 'Vuex';

let comonent = {        

     computed: {

          ...mapGetters([

               ‘testDate'

           ])

      }

};

 

 

注：actions使用 store.commit方法觸發 mutations改變 state

 

3.在vuex不能直接對state進行操做，因此須要提交mutation，mutation相似於vue的method事件。調用的時候有所差距，須要使用commit。因此 mutations 上存放的通常就是咱們要改變 state 的一些方法。

每個 mutation 都有一個字符串的事件類型和一個回調函數，一般在回調函數裏進行操做，

store.commit('increment')

咱們能夠把 mutations理解爲「用於改變 state狀態的一系列方法」。在 vuex的概念裏， state僅能經過 mutation修改，這樣的好處是可以更直觀清晰地集中管理應用的狀態，而不是把數據扔獲得處都是。

 

4.mutation 像事件註冊，須要相應的觸發條件。而 Action 就那個管理觸發條件的。Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，

所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。

actions的兩個方法負責把數據分發到 store中供 mutation使用

 

 

學習連接： http://www.jb51.net/article/122352.htm