一档插，什么是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)會集中到一個比較大的對象诉探。當應(yīng)用變得非常復(fù)雜時日熬，store 對象就有可能變得相當臃腫。為了解決以上問題肾胯，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)
????}
})
