Vuex
什麼是Vuex？
官方說法：Vuex 是一個專為 Vue.js應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。
個人了解：Vuex是用來管理元件之間通信的一個插件
為什麼要用Vuex？
我們知道元件之間是獨立的，元件之間想要實作通信，我目前知道的就隻有props選項，但這也僅限于父元件和子元件之間的通信。如果兄弟元件之間想要實作通信呢？嗯..，方法應該有。抛開怎麼實作的問題，試想一下，當做中大型項目時，面對一大堆元件之間的通信，還有一大堆的邏輯代碼，會不會很抓狂？？那為何不把元件之間共享的資料給“拎”出來，在一定的規則下管理這些資料呢？ 這就是Vuex的基本思想了。
Vuex有什麼特性？
怎麼使用Vuex？
引入Vuex.js檔案
建立執行個體：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
<div id="app">
</div>
</body>
<script>
Vue.use(Vuex);//在建立Vue執行個體之前
var myStore = new Vuex.Store({
state:{
//存放元件之間共享的資料
name:"jjk"
},
mutations:{
//顯式的更改state裡的資料
},
getters:{
//擷取資料的方法
},
actions:{
//
}
});
new Vue({
el:"#app",
data:{
name:"dk"
},
store:myStore,
mounted:function(){
console.log(this)//控制台
}
})
</script>
</html> 先解釋上面代碼的意思：
new Vuex.Store({}) 表示建立一個Vuex執行個體，通常情況下，他需要注入到Vue執行個體裡. Store是Vuex的一個核心方法，字面上了解為“倉庫”的意思。Vuex Store是響應式的，當Vue元件從store中讀取狀态（state選項）時，若store中的狀态發生更新時，他會及時的響應給其他的元件（類似雙向資料綁定） 而且不能直接改變store的狀态，改變狀态的唯一方法就是，顯式地送出更改（mutations選項）
那如何擷取到state的資料呢？
一般會在元件的計算屬性（computed）擷取state的資料（因為，計算屬性會監控資料變化，一旦發生改變就會響應）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
<div id="app">
<hello></hello>
</div>
</body>
<script>
Vue.use(Vuex);
var myStore = new Vuex.Store({
state:{
//存放元件之間共享的資料
name:"jjk"
},
mutations:{
//顯式的更改state裡的資料
},
getters:{
//過濾state資料
},
actions:{
//
}
});
Vue.component('hello',{
template:"<p>{{name}}</p>",
computed: {
name:function(){
return this.$store.state.name
}
},
mounted:function(){
console.log(this)
}
})
new Vue({
el:"#app",
data:{
name:"dk"
},
store:myStore,
mounted:function(){
console.log(this)
}
})
</script>
</html>
state：用來存放元件之間共享的資料。他跟元件的data選項類似，隻不過data選項是用來存放元件的私有資料。
getters：有時候，我們需要對state的資料進行篩選，過濾。這些操作都是在元件的計算屬性進行的。如果多個元件需要用到篩選後的資料，那我們就必須到處重複寫該計算屬性函數；或者将其提取到一個公共的工具函數中，并将公共函數多處導入 - 兩者都不太理想。如果把資料篩選完在傳到計算屬性裡就不用那麼麻煩了，getters就是幹這個的，你可以把getters看成是store的計算屬性。getters下的函數接收接收state作為第一個參數。那麼，元件是如何擷取經過getters過濾的資料呢？ 過濾的資料會存放到$store.getters對象中。
mutations：前面講到的都是如何擷取state的資料，那如何把資料存儲到state中呢？在 Vuex store 中，實際改變 狀态(state) 的唯一方式是通過 送出(commit) 一個 mutation。 mutations下的函數接收state作為參數，接收一個叫做payload（載荷）的東東作為第二個參數，這個東東是用來記錄開發者使用該函數的一些資訊，比如說送出了什麼，送出的東西是用來幹什麼的，包含多個字段，是以載荷一般是對象（其實這個東西跟git的commit很類似）還有一點需要注意：mutations方法必須是同步方法！
actions：既然mutations隻能處理同步函數，我大js全靠‘異步回調’吃飯，怎麼能沒有異步，于是actions出現了。
actions和mutations的差別
1.Actions 送出的是 mutations，而不是直接變更狀态。也就是說，actions會通過mutations，讓mutations幫他送出資料的變更。
2.Action 可以包含任意異步操作。ajax、setTimeout、setInterval不在話下
總結：
各個類型的 API各司其職，mutation 隻管存，你給我（dispatch）我就存；action隻管中間處理，處理完我就給你，你怎麼存我不管；Getter 我隻管取，我不改的。 action放在了 methods 裡面，說明我們應該把它當成函數來用（講道理，鈎子函數也應該可以的） mutation是寫在store裡面的，這說明，它就是個半成品，中間量，我們不應該在外面去操作它。getter寫在了 computed 裡面，這說明雖然 getter我們寫的是函數，但是我們應該把它當成計算屬性來用。
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)