之前寫(xiě)過(guò)很多vue項(xiàng)目，項(xiàng)目中使用過(guò)vuex稚补，那個(gè)時(shí)候看vuex愣是云里霧里童叠，都是照葫蘆畫(huà)瓢使用，沒(méi)有清楚弄明白孔厉，
今天再看一下文檔，感覺(jué)茅塞頓開(kāi)帖努，特別寫(xiě)下來(lái)撰豺，給需要的人借鑒
一，什么是vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式拼余。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)污桦，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
官方文檔是這么說(shuō)的匙监，反正我是沒(méi)看明白
以自己的話說(shuō)vuex是一個(gè)把多個(gè)組件通用的數(shù)據(jù)我們把它拿出來(lái)凡橱，放到一個(gè)叫store里面管理小作，在需要使用的組件里，我們可以拿出來(lái)使用
簡(jiǎn)單來(lái)說(shuō)就是data的共享屬性
二稼钩，關(guān)于store
“store”基本上就是一個(gè)容器顾稀，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
暫時(shí)先把state當(dāng)成我們通用data來(lái)看吧坝撑，這樣就好理解咯~
三静秆，關(guān)于State
state就是我們項(xiàng)目全局通用的data屬性，并且這些屬性是響應(yīng)式的巡李，也就是說(shuō)當(dāng)屬性發(fā)生改變時(shí)抚笔，state是會(huì)動(dòng)態(tài)響應(yīng)的
四，關(guān)于Getter
Getter可以使我們需要從 store 中的 state 中派生出一些狀態(tài)侨拦，例如對(duì)列表進(jìn)行過(guò)濾并計(jì)數(shù)等
Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）殊橙。就像計(jì)算屬性一樣，
getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)狱从，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算膨蛮。
五，關(guān)于Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation矫夯。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的?事件類型 (type)?和 一個(gè)?回調(diào)函數(shù) (handler)鸽疾。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)
五训貌，關(guān)于Action
Action 類似于 mutation制肮，不同在于 （劃重點(diǎn)哦，很多面試官會(huì)問(wèn)噠~） ：
1递沪， 提交的是 mutation豺鼻，而不是直接變更狀態(tài)。
2款慨， 可以包含任意異步操作儒飒。
六，關(guān)于Module
由于使用單一狀態(tài)樹(shù)檩奠，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象桩了。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫埠戳。為了解決以上問(wèn)題井誉，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state整胃、mutation颗圣、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割
七在岂，如何使用
我們講了那么多理論知識(shí)奔则，那實(shí)際情況我們?nèi)绾问褂媚兀黄饋?lái)看吧：
首先是安裝
（1）npm install vuex --save
（2）新建倉(cāng)庫(kù)
在src目錄下新建一個(gè)文件夾蔽午，我們命名為store好了易茬，然后在該文件夾下面創(chuàng)建一個(gè)js文件，我們還是叫他store好啦,截圖看起來(lái)更方便哦
然后開(kāi)始在main.js引入
安裝和引入都好了祠丝，我們來(lái)玩玩吧
在剛剛建的store文件里
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
我們存兩個(gè)變量來(lái)看看
找個(gè)頁(yè)面疾呻，在creat里打印一下this
creat（）{
console.log(this)
}
嗯，找到我們剛剛創(chuàng)建的倉(cāng)庫(kù)啦
來(lái)看看倉(cāng)庫(kù)里面有什么吧
看到我們定義的state和mutation咯
那我們?cè)趺茨玫綌?shù)據(jù)呢写半？
我們都可以打印出來(lái)岸蜗，聰明的你應(yīng)該不會(huì)被難倒吧
1，舉個(gè)例子 我們來(lái)拿state的name吧
creat（）{
console.log(this.$store.state.name)
}
看叠蝇，數(shù)據(jù)打印出來(lái)啦璃岳，是不是超級(jí)簡(jiǎn)單
數(shù)據(jù)拿到了，我想改變他怎么辦悔捶？別擔(dān)心铃慷，我們有mutation
這是我們之前定義的方法
在其他頁(yè)面我們寫(xiě)個(gè)function吧
然后在data里定義msg的值吧
然后我們調(diào)用changeName
看到了嗎 我們的數(shù)據(jù)改變咯
這里只是簡(jiǎn)單介紹了vuex,帶領(lǐng)大家入門(mén)，詳細(xì)的還是去擼官方文檔吧蜕该，再見(jiàn)~
