通俗理解Vuex：狀態管理、集中式存盤管理，把需要多個組件共享的變數全部存盤在一個物件里面，這個物件放置在頂層的vue實體中讓其他組件都可以使用，并且是回應式的，
Vuex核心概念
State—保存共享狀態，單一狀態樹
Getters—類似組件里的計算屬性
Mutations—操作狀態
Actions—用于進行異步操作
Modules—劃分模塊

前言

介紹
Vuex是一個專門為vue.js應用程式開發的狀態管理模式，是一個多組件共享狀態的插件
它采用集中式存盤管理應用的所有組件狀態，并以相應的規則保證狀態以一種可預測的方式發生變化，
Vuex也集成到Vue的官方除錯工具devtools extension，提供了諸如零配置的time-travel除錯、狀態快斬訓入匯出等高級除錯功能，
狀態管理、集中式存盤管理：把需要多個組件共享的變數全部存盤在一個物件里面，這個物件放置在頂層的vue實體中讓其他組件都可以使用，并且是回應式的，

提示：以下是本篇文章正文內容，下面案例可供參考

一、簡單使用

npm安裝Vuex

#運行時依舊依賴，因此不加--save-dev
npm install vuex -save

簡單使用(理解就好)：main.js匯入使用

   //main.js導包安裝插件
     import Vuex from 'vuex'
     Vuex.use(Vuex);
   //以上雖可以，但是容易污染main.js

真實開發
A、src下獨立創建store檔案夾，撰寫邏輯代碼

//src下創建新檔案夾store，創建index.js檔案
     import Vue from 'vue'
     import Vuex from 'vuex'
     //1.安裝插件
     Vue.use(Vuex)
     //2.創建物件
     const store =new Vuex.store({
        state：{}，
        mutations：{}，
        actions：{}，
        getters：{}，
        modules：{}
     })
     //3.匯出物件
     export default store;

B、main.js匯入

4.回main.js匯入
     import store from './store'
     new Vue({
         el:'#app',
         store,    //在這里才能通過原型鏈讓所有組件通過$store用到
         render:h => h(App)
     })

C、使用共享狀態

//5.使用
     $store.state.變數名
     //盡量不要自己直接參考后改資料，如$store.state.變數名++;這種，
     //我們用mutations來提供改資料的方法

二、單例模式-理解

全域單例模式（大管家），將共享的狀態抽取出來，交給大管家統一管理
每個視圖，按照規定好的規則，進行訪問和修改操作
這才是Vuex背后的思想

三、vue-devtools和mutations

1、vue-devtools

vue-devtools是一個瀏覽器插件，裝了便于查看Vuex的各種資料變動

  安裝devtools安裝插件
  瀏覽器->擴展->搜索devtools->找到Vue.js devtools

2、mutaitons

之前我們說過，不推薦直接改Vuex里的資料,因為Vuex能更好跟蹤資料變化，按操作來更好
通過mutation里定義方法，來實作對Vuex里的資料來修改

A、定義操作資料的mutations

//1、設定mutation
    import Vue from 'vue'
    import Vuex from 'vuex'
    
     Vue.use(Vuex)

     const store =new Vuex.store({
        state：{
            counter:100
        }，
        mutations：{
            //方法
            increment(state){
                state.counter++;
            },
            decrement(state){
                state.counter--;
            }
        }，
        actions：{}，
        getters：{}，
        modules：{}
     })

通過$store.commit傳入定義好的方法名的字串，來完成呼叫

2、組件中使用mutation

//2、呼叫
    //定義點擊事件@click,通過commit去呼叫
    methods:{
      addition(){
        this.$store.commit('increment')
      },
      subtraction(){
        this.$store.commit('decrement');
      }
    }

關于Vuex的入門到此就好，準備好了嗎，現在我們開始沖刺了

四、State單一狀態樹

英文名：Single Source Truth，單一資料源
總結：即使你有多個資料，也只創建一個store物件
畢竟 Vue.p原型鏈.$store=store 全域掛載-后面好用

五、進階-Vuex核心概念

Vuex核心概念
  State---保存共享狀態，單一狀態樹
  Getters---類似組件里的計算屬性
  Mutations---操作狀態
  Actions---用于進行異步操作
  Modules---劃分模塊

1、getters基本使用

getters類似于計算屬性，話不多說，上代碼演示

//1、定義
const store =new Vuex.store({
        state：{}，
        mutations：{}，
        actions：{}，
        getters：{
             powerCounter(state){
                 return state.counter * state.counter;
             }
        }，
        modules：{}
     })
//2、使用
//直接當屬性用，不用加小括號 
$store.getters.powerCounter; 
//也可以當函式，傳參給它，但此時getters定義的需要rturn function(引數){}
getters:{
    aaa(state){
        rturn function(引數){

        }
    }
}
$store.getters.powerCounter(引數); 

2、mutations

Vuex的store狀態更新的唯一方式：提交Mutations
Vue要求用同步方法，因為mutations里進行異步操作，devtools不能捕捉它

Mutations主要包括兩部分

   1、字串的事件型別(type)
   2、一個回呼函式(handler),該回呼函式的第一個引數就是state

mutations簡單使用：

A、定義

mutations:{
         increment(state){
             state.counter++;
         }
     }

B、呼叫
使用mutations更新state,利用commit傳入mutation字串

btnclick:function(){
         this.$store.commit("increment")
     }

mutations傳參

使用mutations帶引數,引數要是多可以考慮傳遞物件，

A、普通提交風格

mutations:{
         incrementCounter(state，count){
             state.counter+=count;
         }
}
     
btnclick:function(count){
         this.$store.commit("incrementCounter",count)
 }
//上述傳什么就是什么

B、特殊風格提交
該方法傳的都是一個物件

btnclick:function(count){
         this.$store.commit({
             type:'incrementCounter',
             count,
         })
}

mutations:{
         incrementCounter(state，payload){
             state.counter+=payload.count;
         }
}

mutations回應規則

Vuex的store中的state是回應式的，當state中的資料發生改變時，Vue組件會自動更新
這就要求我們必須遵守一些Vuex對應的規則

1、提前在store中初始化好所需的屬性
2、當給state中的物件添加新屬性時，使用下面方式
   01、使用Vue.set(obj,'newProp',123)
   02、用新物件給舊物件重新賦值

通俗點講：
1、初始化的都有回應式；
2、未初始化的，在mutation初始化定義，是沒有回應式的，
3、后初始化的通過Vue提供的方法，思考借鑒Vue陣列，

mutations的常量型別

mutations的型別常量，，，，，暫時先過，官方推薦這種做法

3、actions

Action類似于Mutation，但是是用來代替Mutation進行異步操作的，
在改state時,不能在actions里直接改，需要用commit去調mutations修改，代碼規范吧，

//vuex代碼
mutations:{
       updateInfo(){

       }
}
   //注意這個context
actions:{
       aupdateInfo(context){
           setTimeout(()=>{
               //不能直接在這里改state,需要用commit去調mutations
               context.commit('updateInfo');
           },1000)
       }
}

   //呼叫：
   //dispatch區別commit;
   methods:{
       btnclick(){
           this.store.dispatch('aupdateInfo');
       }
   }

coderWhy老師講的promise 非常高端，p139集的promise使用太牛了，呼叫actions成功并回傳資料，actions里的方法return promise，然后dispatch調接上.then

4、modules

將store分割成模塊，使得每個模塊都有自己的state、mutations、actions、getters

//模塊a、b可以在外面定義，然后es6語法你懂的，更簡約
 modules:{
        a:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        },
        b:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        }
    }

使用：

    this.$store.state.a.變數名
    this.$store.commit('mutations')
    this.$getters.方法名

六、Vuex專案結構

一圖解所有

總結

單例模式–大官家，
state–全域變數
mutations–提供操作全域變數的方法
getters–類似全域屬性
actions–異步mutations
modules–套娃
注意代碼和檔案結構，共同創建文明和諧vuex，
謝謝閱讀