簡介：
一個網站是許多元件拼成的，元件的資料是共享的。在其中一個元件中進行增刪，在其他元件中需要進行同步的更新

2種方法比較：
1.通過事件。（通知每一個元件，會變的非常複雜，不適合專案）
2.Store資料中心。用來維護狀態資料，每一個元件進行更新的時候，就會通知資料中心，資料中心再去觸發每一個呼叫資料中心的元件的一個更新

如果專案中沒有狀態管理，先安裝 npm install vuex –save
1.引用:再主入口main.js中（因為都要用到）

 import   Vuex from   'vuex'

2.使用:再主入口main.js中（因為都要用到）

 Vue.use(Vuex)

3.例項化Vuex:再主入口main.js中（因為都要用到）

 let vueX = new Vuex.Store({
   state:{
     totlePrice:0     //儲存的狀態資料，放在state資料中心
   },
   mutations:{        //mutations是資料管理中心的動作
     increment(state,price){     //操作狀態資料函式，state是資料管理中心。price是引數
       state.totlePrice += price
     },
     decrement(state
 
,price){     //操作狀態資料函式
       state.totlePrice -= price
     }
   },
   actions:{      //在mutations之前的動作,只能呼叫mutations,不能更改state,跟後端的api介面都放到actions中
     increase(context,price){
        context.commit("increment",price)
     }
   }
})

4.註冊:再主入口main.js中（因為都要用到）

 new Vue ({
  el:'#app',
  router:router,    //後面的router是變數
 

  store:store,      //後面是例項化Vuex的變數
  render: h=>h(App)       //渲染App元件
})

4.呼叫（顯示資料）:在顯示模板App中計算屬性顯示資料

{{totalPrice}}
computed:{
      totalPrice(){     //計算屬性頁面顯示的函式  
        return this.$store.state.totalPrice       //返回資料中心的共享的值
      }
 }

5.呼叫（操作資料）:在子元件中methods方法中操作資料

<button @click="add">+</button>
<button @click="minu">-</button>

methods:{
  add(){
     this.$store.commit("increment",this.price)
     //呼叫中介actions，來操作mutations
     this.$store.dispatch('increase',this.price)
   },
   minu(){
     this.$store.commit("decrement",this.price)
   }
}

狀態集

let modulesA = {
  state:{},
  mutations:{},
  actions: {}
}
let modulesB = {
  state:{},
  mutations:{},
  actions: {}
}
let stors = new Vuex.Store({
  modules:{
    a : modulesA,
    b : modulesB,
  }
})
store.state.a
store.state.b