vuex的原理

1.vuex的作用

vuex是專門爲Vuejs應用程序設計的狀態管理工具。其實是集中的數據管理倉庫。相當於數據庫mongoDB等，任何組件都可以存取倉庫中的數據。
vuex的組成部分：

1. state:是存儲的基本數據。
2. mutations:提交更改數據。
3. getter:對state加工，和computed計算屬性一樣。
4. actions：處理異步，通過store.commit方法觸發mutations中的方法，從而改變state值。
5. module：是store分割的模塊，每個模塊擁有自己的state、mutations、getters、actions。

2.vuex流程和vue對比

vue中的data、methods、computed，可以實現響應式。
視圖通過點擊事件，觸發methods中的方法，更改data的值，一旦數據發生變化，computed中的函數把數據能更新到視圖。那麼computed是如何更新的？其實就是vue的雙向綁定原理了。
computed中的計算屬性getter生成唯一的watcher—>訪問computed中的方法時，會將Dep.target指向它的watcher–>在方法中訪問this.。。。，會調用get方法，新增watcher到dep中—>設置時，會調用set方法觸發dep.notify實現視圖更新。

1.那vuex和vue的響應式例子有什麼關係？

我們也可以通過vuex實現同樣的功能。vuex中的四部分與vue的對應關係：
state--->data、mutations--->methods、getters--->computed、actions：爲了處理異步，不能直接更新state，需要藉助mutations。

2.dispatch、commit又是做什麼的呢？

在vue中，我們觸發點擊事件，就能觸發methods中的方法，這是vue設計好的。而在vuex中則不行了，一定要有個東西來觸發纔行。①通過dispatch可以觸發可以觸發actions中的方法，②actions中的commit可以觸發mutations中的方法。從而實現state的更新。

vuex實現響應式的例子：

//store.js
const store =  new Vuex.Store({
    
    state: {
        count: 0
    },
    
    //第三步：改變state值，state的值只能通過mutations來修改
    mutations: {
        increment(state) {
            state.count++
        }
    },
    
   //第二步：this.$store.commit("increment")觸發mutations中函數"increment"
    actions: {
        increment({commit}) {
             commit("increment"); //this.$store.commit("increment")
        }
     
    },
    
   //第四步：通過getter中的方法來獲取state值
    getters: {
        getCount(state) {
            return state.count
        }
    }
    })
     
    export default store

//App.vue
<template>
    　　<div id="app">
            <button @click="increment">增加</button>
            {{this.$store.getters.getCount}}
    　　</div>
    </template>
     
    <script>
    export default {
        methods: {
        increment(){
                //第一步:this.$store.dispatch("increment")觸發actions函數"increment"
                this.$store.dispatch("increment")
            }
        }
    }
    </script>

3.vuex的原理

vuex吸收了redux的各種優點，完美的結合了vue的響應式數據。那麼它的原理是什麼呢？
1.每一個vue的插件，都需要一個公開的install方法，vuex也不例外。

// src/store.js
export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    return
  }
  Vue = _Vue
  applyMixin(Vue)//在所有組件的beforeCreate注入了設置this.$store這樣的一個對象,
  //在任意組件中執行this.$store都能找到store對象
}

2.Vuex.Store的構造函數中，有一堆初始化以及resetStoreVM(this,state)整個vuex的關鍵。

// src/store.js
function resetStoreVM (store, state, hot) {
  // 省略無關代碼
  Vue.config.silent = true
  //本質：將我們傳入的state作爲一個隱藏的vue組件的data
  //也就是說，我們的commit操作，本質上其實是修改這個組件的data
  store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })
}
//this.$store._vm.$data.$$state===this.$store.state

總結：

• vuex是針對vuejs的狀態管理工具。vuex完美的結合了vue的響應式數據。
• vue可以直接觸發methods中的方法，vuex不行。爲了處理異步，當你觸發一個點擊事件時，會通過dispatch來訪問actions中的方法，actions中的commit會觸發mutations中的方法從而修改state的值，通過getters來把數據反映到視圖。
• vuex通過Vue.use(vuex)，從而調用install方法，通過applyMixin(Vue)在任意組件執行this.$store都能訪問到store對象，實現將store掛載注入到組件中。
• vuex的state狀態是響應式的，是藉助vue的data是響應式，將state存入vue實例組件的data中。
• vuex的getters則是藉助於vue的計算屬性computed實現數據的實時監聽。

參考文檔：http://www.imooc.com/article/291242
https://www.jianshu.com/p/d95a7b8afa06
https://www.cnblogs.com/tg666/p/11532587.html