一、vuex的作用：

　　vuex是一個專為Vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件狀態，並以相應的規則保證狀態以一種可預測的方式變化。

　　作用：元件之間的通訊，大規模的邏輯程式碼，把元件之間共享的資料給拎出來，在一定的規則下管理這些資料，這就是Vuex的基本思想了。

二、使用和注意

　　new Vuex.Store({})表示建立一個Vuex例項，通常情況下，它需要注入到Vue例項裡，Store是Vuex的一個核心方法，字面上理解“倉庫”的意思。Vuex Store是響應式的，

當Vue元件從Store中讀取狀態，（state選項時），若store中的狀態發生更新時，它會及時的響應給其他元件（類似雙向資料繫結）並且不能直接改變store的狀態，改變狀態的唯一方法就是，顯示地提交更改（mutations選項）。

 　　***有四個核心選項：state、mutations、getters、actions (一般會在元件的計算屬性computed獲取state的資料，以為計算屬性會監控資料變化，一旦發生改變會響應)

三、state、mutations、getters、actions的使用

　　1、state：用來存放元件之間共享的資料，它跟元件的data選項類似，只不過data選項是用來存放元件的私有資料。

　　2、getters：有時候，我們需要對data的資料進行篩選，過濾。這些操作都是在元件的計算屬性中進行的，如果多個元件需要用到篩選後的資料，那我們就必須到處重複寫該計算屬性函式，或者將其提取到一個公共的工具函式中，

並將公共函式多處匯入，兩種方法都不是很理想。如果把資料篩選完再傳到計算屬性裡，就不用那麼麻煩了，getters就是幹這個的，你可以把getters看成是store的計算屬性，getters下的函式接受state做為第一個引數。那麼，元件是如何經過getters過濾的資料呢？過濾的資料會存放到$store.getters物件中。

　　3、mutations: 前面講到的都是如何獲取state資料，那如何把資料儲存到state中呢？在vuex store中，實際改變state唯一的方式是通過提交commit 一個mutation。mutations下的函式接受tate作為引數，接手一個叫做payload(載荷)的東東作為第二個引數，這個東東用來記錄開發者使用該函式的一些資訊，比如說提交了什麼，提交的懂事是用來幹什麼的，包含多少個欄位，所以載荷一般是物件，（其實這個和git的commit很類似）還有一點很重要mutations的方法必須是同步方法。

　　　　①在mutayions選項裡，註冊函式裡面裝邏輯程式碼。

　　　　②在元件裡，this.$store.commit('change', payload) 注意：提交函式名要一 一對應。

　　　　③觸發函式，state就會響應改變。

　　　　④在元件的計算屬性裡this.$store.state獲取你想要的資料。

　　4、actions既然mutations只能處理同步函式，js基本靠“非同步回撥”，怎麼能沒有非同步？於是actions出現了

　　actions和mutations的區別：

　　　　⑴Actions提交的是mutations，而不是直接變更狀態，也就是說actions會通過mutations，讓mutations幫他提交資料變更。

　　　　⑵Actions可以包含任意非同步操作。ajax、setTimeout、setInterval不在話下。

　　舉個栗子：

Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放元件之間共享的資料
            name:"jjk",
            age:18,
            num:1
        },
         mutations:{
             //顯式的更改state裡的資料
             change:function(state,a){
                //  state.num++;
               console.log(state.num += a); 
               
             },
             changeAsync:function(state,a){
                 console.log(state.num +=a);
             }
         },
         getters:{
             getAge:function(state){
                 return state.age;
             }
         },
         actions:{
　　　　　　　　//設定延時
             add:function(context,value){
                 setTimeout(function(){
　　　　　　　　　　　//提交事件
                    context.commit('changeAsync',value);
                 },1000)
                 
             }
         }
    });

    Vue.component('hello',{
        template:`
                <div>
                    <p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數：{{num}}</p>
                    <button @click='changeNumAnsyc'>change</button>
                </div>`,
        computed: {
            name:function(){
                return this.$store.state.name
            },
            age:function(){
                return this.$store.getters.getAge
            },
            num:function(){
                return this.$store.state.num
            }
        },
         mounted:function(){
            console.log(this)
        },
        methods: {
            changeNum: function(){
                //在元件裡提交
                // this.num++;
                this.$store.commit('change',10)
            },
　　　　　　　　//在元件裡派發事件 當點選按鈕時，changeNumAnsyc觸發-->actions裡的add函式被觸發-->mutations裡的changeAsync函式觸發

            changeNumAnsyc:function(){
                this.$store.dispatch('add', 5);
            }
        },
        data:function(){
            return {
                // num:5
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })

　先整明白context dispatch是什麼東西：

　　　　context: 是與store例項具有相同的方法和屬性的物件，可以通過context.state和context。getters來獲取state和getters.

　　　　dispatch:  翻譯為“派發、派遣”的意思，觸發事件時，dispatch就會通知actions（跟commit一樣一樣的）。

總結：各個型別的API各司其職，mutations只管存，你給我（dispatch）我就存，actions只管中間處理，處理完我就給你，你怎麼存我不管。getters我只管取，我不更改，action放在methods裡面，說明我們應該把它當成函式來用（按道理說鉤子函式應該也可以）mutations是寫在store裡面的，這說明，它就是個半成品，中間量，我們不應該在外面去操作它。getter寫在了computed裡面，這說明雖然getter我們寫的是函式，但是我們應該把它當成計算屬性來用。