2019-02-28 vuex入門2

那如何獲取到state的數(shù)據(jù)呢蜒秤？

　　　　一般會在組件的計算屬性（computed）獲取state的數(shù)據(jù)（因為，計算屬性會監(jiān)控數(shù)據(jù)變化贝咙，一旦發(fā)生改變就會響應(yīng)）

<!DOCTYPE html>

<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>

<body>

? ? <div id="app">

? ? ? ? <hello></hello>

? ? </div>

</body>

? ? Vue.use(Vuex);

? var myStore =? new Vuex.Store({

? ? ? ? state:{

? ? ? ? ? ? //存放組件之間共享的數(shù)據(jù)

? ? ? ? ? ? name:"jjk"

? ? ? ? },

? ? ? ? mutations:{

? ? ? ? ? ? //顯式的更改state里的數(shù)據(jù)

? ? ? ? },

? ? ? ? getters:{

? ? ? ? ? ? //過濾state數(shù)據(jù)

? ? ? ? },

? ? ? ? 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：用來存放組件之間共享的數(shù)據(jù)样悟。他跟組件的data選項類似，只不過data選項是用來存放組件的私有數(shù)據(jù)庭猩。

getters：有時候窟她，我們需要對state的數(shù)據(jù)進行篩選，過濾蔼水。這些操作都是在組件的計算屬性進行的震糖。如果多個組件需要用到篩選后的數(shù)據(jù)，那我們就必須到處重復(fù)寫該計算屬性函數(shù)趴腋；或者將其提取到一個公共的工具函數(shù)中试伙，并將公共函數(shù)多處導(dǎo)入 - 兩者都不太理想嘁信。如果把數(shù)據(jù)篩選完在傳到計算屬性里就不用那么麻煩了，getters就是干這個的疏叨，你可以把getters看成是store的計算屬性潘靖。getters下的函數(shù)接收接收state作為第一個參數(shù)。那么蚤蔓，組件是如何獲取經(jīng)過getters過濾的數(shù)據(jù)呢卦溢？過濾的數(shù)據(jù)會存放到$store.getters對象中。具體看一個例子：

<!DOCTYPE html>

<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>

<body>

? ? <div id="app">

? ? ? ? <hello></hello>

? ? </div>

</body>

? ? Vue.use(Vuex);

? var myStore =? new Vuex.Store({

? ? ? ? state:{

? ? ? ? ? ? //存放組件之間共享的數(shù)據(jù)

? ? ? ? ? ? name:"jjk",

? ? ? ? ? ? age:18

? ? ? ? },

? ? ? ? mutations:{

? ? ? ? ? ? //顯式的更改state里的數(shù)據(jù)

? ? ? ? },

? ? ? ? getters:{

? ? ? ? ? ? getAge:function(state){

? ? ? ? ? ? ? ? return state.age;

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? actions:{

? ? ? ? ? ? //

? ? ? ? }

? ? });

? ? Vue.component('hello',{

? ? ? ? template:"<p>姓名：{{name}} 年齡：{{age}}</p>",

? ? ? ? computed: {

? ? ? ? ? ? name:function(){

? ? ? ? ? ? ? ? return this.$store.state.name

? ? ? ? ? ? },

? ? ? ? ? ? age:function(){

? ? ? ? ? ? ? ? return this.$store.getters.getAge

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? mounted:function(){

? ? ? ? ? ? console.log(this)

? ? ? ? }

? ? })

? ? new Vue({

? ? ? ? el:"#app",

? ? ? ? data:{

? ? ? ? ? ? name:"dk"

? ? ? ? },

? ? ? ? store:myStore,

? ? ? ? mounted:function(){

? ? ? ? ? ? console.log(this)

? ? ? ? }

? ? })

</script>

</html>

　mutations：前面講到的都是如何獲取state的數(shù)據(jù)秀又，那如何把數(shù)據(jù)存儲到state中呢单寂？在 Vuex store 中，實際改變狀態(tài)(state) 的唯一方式是通過提交(commit) 一個 mutation吐辙⌒觯　　mutations下的函數(shù)接收state作為參數(shù)，接收一個叫做payload（載荷）的東東作為第二個參數(shù)昏苏，這個東東是用來記錄開發(fā)者使用該函數(shù)的一些信息尊沸，比如說提交了什么，提交的東西是用來干什么的贤惯，包含多個字段洼专，所以載荷一般是對象（其實這個東西跟git的commit很類似）還有一點需要注意：mutations方法必須是同步方法！

　　具體看實例：

<!DOCTYPE html>

<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>

<body>

? ? <div id="app">

? ? ? ? <hello></hello>

? ? </div>

</body>

? ? Vue.use(Vuex);

? var myStore =? new Vuex.Store({

? ? ? ? state:{

? ? ? ? ? ? //存放組件之間共享的數(shù)據(jù)

? ? ? ? ? ? name:"jjk",

? ? ? ? ? ? age:18,

? ? ? ? ? ? num:1

? ? ? ? },

? ? ? ? mutations:{

? ? ? ? ? ? //顯式的更改state里的數(shù)據(jù)

? ? ? ? ? ? change:function(state,a){

? ? ? ? ? ? ? ? //? state.num++;

? ? ? ? ? ? ? console.log(state.num += a);

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? getters:{

? ? ? ? ? ? getAge:function(state){

? ? ? ? ? ? ? ? return state.age;

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? actions:{

? ? ? ? ? ? //

? ? ? ? }

? ? });

? ? Vue.component('hello',{

? ? ? ? template:"<p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數(shù)：{{num}}</p>",

? ? ? ? computed: {

? ? ? ? ? ? name:function(){

? ? ? ? ? ? ? ? return this.$store.state.name

? ? ? ? ? ? },

? ? ? ? ? ? age:function(){

? ? ? ? ? ? ? ? return this.$store.getters.getAge

? ? ? ? ? ? },

? ? ? ? ? ? num:function(){

? ? ? ? ? ? ? ? return this.$store.state.num

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? mounted:function(){

? ? ? ? ? ? console.log(this)

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? changeNum: function(){

? ? ? ? ? ? ? ? //在組件里提交

? ? ? ? ? ? ? ? // this.num++;

? ? ? ? ? ? ? ? this.$store.commit('change',10)

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? data:function(){

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? // num:5

? ? ? ? ? ? }

? ? ? ? }

? ? })

? ? new Vue({

? ? ? ? el:"#app",

? ? ? ? data:{

? ? ? ? ? ? name:"dk"

? ? ? ? },

? ? ? ? store:myStore,

? ? ? ? mounted:function(){

? ? ? ? ? ? console.log(this)

? ? ? ? }

? ? })

</script>

</html>

可以看出：更改state的數(shù)據(jù)并顯示在組件中孵构，有幾個步驟：1. 在mutations選項里屁商，注冊函數(shù) 函數(shù)里面裝邏輯代碼。2.在組件里颈墅，this.$store.commit('change',payload) ?注意：提交的函數(shù)名要一一對應(yīng) ?3.觸發(fā)函數(shù)蜡镶，state就會相應(yīng)更改 4.在組件的計算屬性里?this.$store.state 獲取你想要得到的數(shù)據(jù)

　actions：既然mutations只能處理同步函數(shù)，我大js全靠‘異步回調(diào)’吃飯恤筛，怎么能沒有異步官还，于是actions出現(xiàn)了...

　　　　　　　　actions和mutations的區(qū)別

　　　　　　　　　　1.Actions?提交的是 mutations，而不是直接變更狀態(tài)叹俏。也就是說妻枕，actions會通過mutations，讓mutations幫他提交數(shù)據(jù)的變更粘驰。

　　　　　　　　　　2.Action 可以包含任意異步操作屡谐。ajax、setTimeout蝌数、setInterval不在話下

　　再來看一下實例：

<!DOCTYPE html>

<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>

<body>

? ? <div id="app">

? ? ? ? <hello></hello>

? ? </div>

</body>

? ? Vue.use(Vuex);

? var myStore =? new Vuex.Store({

? ? ? ? state:{

? ? ? ? ? ? //存放組件之間共享的數(shù)據(jù)

? ? ? ? ? ? name:"jjk",

? ? ? ? ? ? age:18,

? ? ? ? ? ? num:1

? ? ? ? },

? ? ? ? mutations:{

? ? ? ? ? ? //顯式的更改state里的數(shù)據(jù)

? ? ? ? ? ? change:function(state,a){

? ? ? ? ? ? ? ? //? state.num++;

? ? ? ? ? ? ? console.log(state.num += a);

? ? ? ? ? ? },

? ? ? ? ? ? changeAsync:function(state,a){

? ? ? ? ? ? ? ? console.log(state.num +=a);

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? getters:{

? ? ? ? ? ? getAge:function(state){

? ? ? ? ? ? ? ? return state.age;

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? actions:{

　　　　　　　　//設(shè)置延時

? ? ? ? ? ? add:function(context,value){

? ? ? ? ? ? ? ? setTimeout(function(){

　　　　　　　　　　　//提交事件

? ? ? ? ? ? ? ? ? ? context.commit('changeAsync',value);

? ? ? ? ? ? ? ? },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

? ? ? ? ? ? },

? ? ? ? ? ? age:function(){

? ? ? ? ? ? ? ? return this.$store.getters.getAge

? ? ? ? ? ? },

? ? ? ? ? ? num:function(){

? ? ? ? ? ? ? ? return this.$store.state.num

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? mounted:function(){

? ? ? ? ? ? console.log(this)

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? changeNum: function(){

? ? ? ? ? ? ? ? //在組件里提交

? ? ? ? ? ? ? ? // this.num++;

? ? ? ? ? ? ? ? this.$store.commit('change',10)

? ? ? ? ? ? },

　　　　　　　　//在組件里派發(fā)事件當(dāng)點擊按鈕時愕掏，changeNumAnsyc觸發(fā)-->actions里的add函數(shù)被觸發(fā)-->mutations里的changeAsync函數(shù)觸發(fā)

? ? ? ? ? ? changeNumAnsyc:function(){

? ? ? ? ? ? ? ? this.$store.dispatch('add', 5);

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? data:function(){

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? // num:5

? ? ? ? ? ? }

? ? ? ? }

? ? })

? ? new Vue({

? ? ? ? el:"#app",

? ? ? ? data:{

? ? ? ? ? ? name:"dk"

? ? ? ? },

? ? ? ? store:myStore,

? ? ? ? mounted:function(){

? ? ? ? ? ? console.log(this)

? ? ? ? }

? ? })

</script>

</html>

先整明白 context dispatch是什么東西：

context：context是與 store 實例具有相同方法和屬性的對象《ド。可以通過context.state和context.getters來獲取 state 和 getters饵撑。

dispatch：翻譯為‘派發(fā)剑梳、派遣’的意思，觸發(fā)事件時滑潘，dispatch就會通知actions（跟commit一樣一樣的）參數(shù)跟commit也是一樣的垢乙。

action的大體流程：1.在actions選項里添加函數(shù)（異步）并提交到對應(yīng)的函數(shù)（在mutation選項里）中??context.commit('changeAsync',value);

actions:{

? ? ? ? ? ? add:function(context,value){

? ? ? ? ? ? ? ? setTimeout(function(){

? ? ? ? ? ? ? ? ? ? context.commit('changeAsync',value);

? ? ? ? ? ? ? ? },1000)

? ? ? ? ? ? }

? ? ? ? }

　2.　在組件里：?changeNumAnsyc:function(){this.$store.dispatch('add', 5);} ?將dispatch“指向”actions選項里的函數(shù)

　3.　在mutations選項里，要有對應(yīng)的函數(shù)?changeAsync:function(state,a){console.log(state.num +=a);}

總結(jié)：

各個類型的 API各司其職语卤，mutation 只管存追逮，你給我（dispatch）我就存；action只管中間處理粹舵，處理完我就給你钮孵，你怎么存我不管；Getter 我只管取眼滤，我不改的巴席。action放在了 methods 里面，說明我們應(yīng)該把它當(dāng)成函數(shù)來用（講道理诅需，鉤子函數(shù)也應(yīng)該可以的） mutation是寫在store里面的漾唉，這說明，它就是個半成品诱担，中間量毡证，我們不應(yīng)該在外面去操作它电爹。getter寫在了 computed 里面蔫仙，這說明雖然 getter我們寫的是函數(shù)，但是我們應(yīng)該把它當(dāng)成計算屬性來用丐箩。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末摇邦，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子屎勘，更是在濱河造成了極大的恐慌施籍，老刑警劉巖，帶你破解...
沈念sama閱讀 206,968評論 6贊 482
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件概漱，死亡現(xiàn)場離奇詭異丑慎，居然都是意外死亡，警方通過查閱死者的電腦和手機瓤摧，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,601評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門竿裂，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人照弥，你說我怎么就攤上這事腻异。” “怎么了这揣？”我有些...
開封第一講書人閱讀 153,220評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵悔常，是天一觀的道長影斑。經(jīng)常有香客問我，道長机打，這世上最難降的妖魔是什么矫户？我笑而不...
開封第一講書人閱讀 55,416評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮残邀，結(jié)果婚禮上吏垮，老公的妹妹穿的比我還像新娘。我一直安慰自己罐旗，他們只是感情好膳汪，可當(dāng)我...
茶點故事閱讀 64,425評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著九秀，像睡著了一般遗嗽。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上鼓蜒，一...
開封第一講書人閱讀 49,144評論 1贊 285
城市分裂傳說
那天痹换，我揣著相機與錄音，去河邊找鬼都弹。笑死娇豫，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的畅厢。我是一名探鬼主播冯痢，決...
沈念sama閱讀 38,432評論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼框杜！你這毒婦竟也來了浦楣？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,088評論 0贊 261
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤咪辱，失蹤者是張志新（化名）和其女友劉穎振劳，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體油狂，經(jīng)...
沈念sama閱讀 43,586評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡历恐，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,028評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了专筷。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弱贼。...
茶點故事閱讀 38,137評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖仁堪，靈堂內(nèi)的尸體忽然破棺而出哮洽，到底是詐尸還是另有隱情，我是刑警寧澤弦聂，帶...
沈念sama閱讀 33,783評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布鸟辅，位于F島的核電站氛什，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏匪凉。R本人自食惡果不足惜枪眉，卻給世界環(huán)境...
茶點故事閱讀 39,343評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望再层。院中可真熱鬧贸铜，春花似錦、人聲如沸聂受。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,333評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽蛋济。三九已至棍鳖，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間碗旅，已是汗流浹背渡处。一陣腳步聲響...
開封第一講書人閱讀 31,559評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留祟辟，地道東北人医瘫。一個月前我還...
沈念sama閱讀 45,595評論 2贊 355
代替公主和親
正文我出身青樓，卻偏偏與公主長得像旧困，于是被迫代替她去往敵國和親醇份。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,901評論 2贊 345

2019-02-28 vuex入門2

推薦閱讀更多精彩內(nèi)容