一，什么是vuex
官方說法：Vuex 是一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
個人理解：Vuex是用來管理組件之間通信的一個插件
二? Vuex 基本使用篇
安裝
npm i vuex -S
項目中的任何地方都要用到vuex，所以要全局注冊vuex，并且使用vuex
import? Vue? from? 'vue'??
import? Vuex? from? 'vuex'??
Vue.use(Vuex)
三 Vuex的核心
1, state
????用來存放組件之間共享的數(shù)據(jù)。他跟組件的data選項類似，只不過data選項是用來存放組件的私有數(shù)據(jù)。
2, getters
????有時候，我們需要對state的數(shù)據(jù)進行篩選，過濾。這些操作都是在組件的計算屬性進行的。如果多個組件需要用到篩選后的數(shù)據(jù)，那我們就必須到處重復(fù)寫該計算屬性函數(shù)；或者將其提取到一個公共的工具函數(shù)中，并將公共函數(shù)多處導(dǎo)入 - 兩者都不太理想。如果把數(shù)據(jù)篩選完在傳到計算屬性里就不用那么麻煩了，getters就是干這個的，你可以把getters看成是store的計算屬性。getters下的函數(shù)接收接收state作為第一個參數(shù),? ?getters 改變不了state的值,下一個mutation是唯一可以改變state的值
3,mutation
????????在 Vuex store 中，實際改變 狀態(tài)(state) 的唯一方式是通過 提交(commit) 一個 mutation。mutations下的函數(shù)接收state作為參數(shù)，接收一個叫做payload（載荷）的東東作為第二個參數(shù)，這個東東是用來記錄開發(fā)者使用該函數(shù)的一些信息，比如說提交了什么，提交的東西是用來干什么的，包含多個字段，所以載荷一般是對象（其實這個東西跟git的commit很類似）
還有一點需要注意：mutations方法必須是同步方法！
4,action
????既然mutations只能處理同步函數(shù)，我大js全靠‘異步回調(diào)’吃飯，怎么能沒有異步，于是actions出現(xiàn)了
a, Actions 提交的是 mutations，而不是直接變更狀態(tài)。也就是說，actions會通過mutations，讓mutations幫他提交數(shù)據(jù)的變更。
b, Action 可以包含任意異步操作。ajax、setTimeout、setInterval不在話下
5,module
? ??由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割。
四，vuex實例
A，友情提示：
1， this.$store.commit 來觸發(fā)之前定義好的 mutations 中的方法
2， this.$store 獲取到 store,
3， this.$store.state 來獲取狀態(tài)對象，
4，dispatch：翻譯為‘派發(fā)、派遣’的意思，觸發(fā)事件時，dispatch就會通知actions（跟commit一樣一樣的）參數(shù)跟commit也是一樣的。
5，context：context 是與 store 實例具有相同方法和屬性的對象。 可以通過context.state和context.getters 來獲取 state 和 getters。
6，new Vuex.Store({}) 表示創(chuàng)建一個Vuex實例，通常情況下，他需要注入到Vue實例里. Store是Vuex的一個核心方法，字面上理解為“倉庫”的意思。
B，例子
html代碼：
?script代碼：
? Vue.use(Vuex);
? var myStore =new Vuex.Store({
????state:{
????//存放組件之間共享的數(shù)據(jù)
? ? ? name:"HL",
? ? ? age:17,
? ? ? num:1
? ? },
? ? mutations:{
????//顯式的更改state里的數(shù)據(jù)
? ? ? change:function(state,a){
? ? ? ? console.log(state.num += a);
? ? ? },
? ? ? changeAsync:function(state,a){
console.log(state.num +=a);
? ? ? }
},
? ? getters:{
????//過濾state數(shù)據(jù)
? ? ? getAge:function(state){
if (state.age >18)
return state.age
? ? ? ? else
? ? ? ? ? state.age="未成年"
? ? ? ? ? return state.age
? ? ? }
},
? ? actions:{
//設(shè)置延時
? ? ? add:function(context,value){
setTimeout(function(){
//提交事件
? ? ? ? ? context.commit('changeAsync',value);//context：context 是與 store 實例具有相同方法和屬性的對象。
// 可以通過context.state和context.getters 來獲取 state 和 getters。
? ? ? ? },1000)
}
}
});
? Vue.component('hello',{
template:"
<div>
????<p @click='changeNum'>
????????姓名：{{name}} 年齡：{{age}} 次數(shù)：{{num}}
????</p>
? ? ? ? <button @click='changeNumAnsyc'>change</button>
</div>" ,
? ? computed: {
name:function(){
return this.$store.state.name? //this.$store 獲取到 store, this.$store.state 來獲取狀態(tài)對象，
? ? ? },
? ? ? age:function () {
????????????return this.$store.getters.getAge
? ? ? },
? ? ? num:function(){
? ? ? ? ? ? ? ?return this.$store.state.num
? ? ? }
},
? ? mounted:function(){
console.log(this)
},
? ? methods:{
changeNum:function () {
//在組件中提交
? ? ? ? this.$store.commit('change',10)? ? //this.$store.commit 來觸發(fā)之前定義好的 mutations 中的方法? change是mutations里的函數(shù)，a=10
? ? ? },
? ? ? changeNumAnsyc:function(){
this.$store.dispatch('add', 5);
? ? ? ? //dispatch：翻譯為‘派發(fā)、派遣’的意思，觸發(fā)事件時，dispatch就會通知actions（跟commit一樣一樣的）參數(shù)跟commit也是一樣的。
? ? ? }
},
? ? data:function(){
return {
// num:5
? ? ? }
}
})
new Vue({
el:"#app",
? ? data:{
name:"dk"
? ? },
? ? store:myStore,
? ? mounted:function(){
????????console.log(this)
????}
})
