Vuex是什么调煎？
Vuex是Vue配套的公共數(shù)據(jù)管理工具污茵，我們可以將共享的數(shù)據(jù)保存到Vuex中搞莺，方便項(xiàng)目中的任何組件獲取和修改vuex中的數(shù)據(jù)更哄。
為什么要使用Vuex?
在企業(yè)開發(fā)中，我們遇到兩個(gè)問題：
1啸如、如果想要在子組件中使用祖先組件的數(shù)據(jù)侍匙，只能一級(jí)一級(jí)的往下傳遞，很麻煩叮雳！
2丈积、兄弟組件間不能直接傳遞數(shù)據(jù)，若兄弟組件間想要傳遞數(shù)據(jù)债鸡，只能借助父組件！
解決方法：使用Vuex
Vuex共享數(shù)據(jù)：
在Vuex中：
1铛纬、State 屬性是 Vuex 這一狀態(tài)管理工具的唯一的數(shù)據(jù)源厌均，所有的共享數(shù)據(jù)都儲(chǔ)存在里面（ 類似data）。
2告唆、mutation屬性 是 Vuex 中改變 state 唯一的方法棺弊。
mutation的使用與事件處理函數(shù)非常相似，都具有類型和回調(diào)函數(shù)(類似methods擒悬，不過獲取state中的變量不是this.變量名模她，而是state.變量名)。
3懂牧、getters屬性類似組件中的計(jì)算屬性（computed）,當(dāng)數(shù)據(jù)被調(diào)用過且沒發(fā)生改變時(shí)侈净，之后的調(diào)用就到緩存區(qū)中找。
使用getters中的數(shù)據(jù)：this.$store.gettters.方法名
在組件中：
1僧凤、先在祖先組件中保存共享數(shù)據(jù)（后代組件可直接使用）： store:store
2畜侦、使用共享: this.$store.state.數(shù)據(jù)名
3、調(diào)用Vuex的mutations中的函數(shù)修改共享：this.$store.commit('方法名')
4躯保、 使用getters中的數(shù)據(jù)：this.$store.getters.方法名
e.g.
export default new Vuex.Store({
state: { // 保存共享數(shù)據(jù)旋膳，類似data
count: 0
},
mutations: { // 保存修改共享數(shù)據(jù)的方法 ,類似methods
decrement (state) {
state.count--
},
increment (state) {
state.count++
}
}，
getters:{//類似計(jì)算屬性computed
fn (state) {
return state.count+"拼接內(nèi)容"
}
}
})
在組件中：
<template>
<div class="about">
<button @click="mAdd">增加</button>
<button @click="mSub">減少</button>
//2途事、使用共享數(shù)據(jù) this.$store.state.數(shù)據(jù)名
<span>{{this.$store.state.msg}}</span>
//使用getters：this.$store.getters.方法名
<span>{{this.$store.getters.fn}}</span>
</div>
</template>
export default {
data () {
return {
count: 1
}
},
//1验懊、先在祖先組件中保存共享數(shù)據(jù)擅羞，后代組件可直接使用
store:store,
methods:{
mAdd (){
//調(diào)用Vuex的mutations中的函數(shù)修改共享數(shù)據(jù)
this.$store.commit("increment");
},
mSub () {
this.$store.commit("decrement");
}
}
}
