真正掌握vuex的使用方法(三)

接下來(lái)咱們繼續(xù)使用vuex來(lái)完成上篇文章的投票實(shí)例。大家一定要記住鳖粟,學(xué)習(xí)編程這種事一定要慢慢來(lái)才會(huì)快禾唁!所以一定要將代碼多敲幾遍哦!

目前當(dāng)前的票數(shù)已經(jīng)可以在頁(yè)面中渲染出來(lái)了迟蜜!接下來(lái)要做的事就是讓按鈕起到應(yīng)有的責(zé)任:點(diǎn)擊對(duì)應(yīng)的按鈕讓數(shù)字加1, 總票數(shù)也要加1刹孔。很簡(jiǎn)單,只要給按鈕增加一個(gè)事件,直接改變其狀態(tài)即可髓霞,代碼如下:

  <div id="app">
      <div><h2>總票數(shù):{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img src="./assets/node.png">
          <h3>如何通過(guò)node.js對(duì)數(shù)據(jù)進(jìn)行MD5加密</h3>
          <!--為該按鈕增加一個(gè)事件卦睹,讓nodeVoteCount的狀態(tài)加1-->
          <input type="button" value="投票" @click="$store.state.nodeVoteCount++">票數(shù):{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法(一)</h3>
          <!--為該按鈕增加一個(gè)事件,讓vueVoteCount的狀態(tài)加1-->
          <input type="button" value="投票" @click="$store.state.vueVoteCount++">票數(shù):{{vueVoteCount}}
      </div>
  </div>

現(xiàn)在有的人可能會(huì)有一個(gè)疑問(wèn)方库,改變值為什么不用簡(jiǎn)化的形式去寫(xiě)呢结序?好吧,咱們?cè)囈话眩?/p>

  <div id="app">
      <div><h2>總票數(shù):{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img src="./assets/node.png">
          <h3>如何通過(guò)node.js對(duì)數(shù)據(jù)進(jìn)行MD5加密</h3>
          <input type="button" value="投票" @click="nodeVoteCount++">票數(shù):{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法(一)</h3>
          <input type="button" value="投票" @click="vueVoteCount++">票數(shù):{{vueVoteCount}}
      </div>
  </div>

你會(huì)驚訝地發(fā)現(xiàn)纵潦,點(diǎn)擊投票按鈕不僅起不到任何的效果徐鹤,居然還報(bào)錯(cuò)飄紅了。怎么辦邀层?先看一下報(bào)錯(cuò)的信息:

//nodeVoteCount沒(méi)有在計(jì)算屬性中設(shè)置setter
 Computed property "nodeVoteCount" was assigned to but it has no setter.

上面那個(gè)錯(cuò)誤告訴我們返敬,在使用了vuex的情況下,在頁(yè)面中不能直接更改狀態(tài)值寥院。在這個(gè)時(shí)候咱們就需要用到vuex當(dāng)中的 mutation了劲赠。

咱們知道vue的視圖都是由數(shù)據(jù)驅(qū)動(dòng)的,也就是說(shuō)狀態(tài)(state)里面的數(shù)據(jù)是動(dòng)態(tài)變化的秸谢,而要改變狀態(tài)內(nèi)數(shù)據(jù)的唯一的方法就是通過(guò)mutation!也就是說(shuō)mutation內(nèi)可以存放一些改變狀態(tài)的邏輯方法凛澎!這也是Vuex設(shè)計(jì)的一個(gè)特點(diǎn),處理數(shù)據(jù)的邏輯和視圖進(jìn)行分離钮追!

接下來(lái)咱們要修改一下store.js當(dāng)中的代碼了预厌,將其修改為:

import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const state={
    nodeVoteCount:1,//node的初始票數(shù)
    vueVoteCount:2,//vue的初始票數(shù)
};
//生明一個(gè)常量mutations,將所有的mutation放入其中
const mutations={
    //為nodeVoteCount加1
    addNodeVote(state){//這里的state即是上面定義的state常量
        state.nodeVoteCount++;
       //根據(jù)具體情況元媚,你還可以在這里寫(xiě)一些其它的邏輯來(lái)改變狀態(tài)
    },
    //為vueVoteCount加1
    addVueVote(state){//這里的state即是上面定義的state常量
        state.vueVoteCount++;
        //根據(jù)具體情況轧叽,你還可以在這里寫(xiě)一些其它的邏輯來(lái)改變狀態(tài)
    }
}
export default new Vuex.Store({//暴露Store對(duì)象
    state,
    mutations//將mutations進(jìn)行暴露
})

Vuex 建議我們mutation需要用大寫(xiě)常量來(lái)表示,目的是與action(后面會(huì)講到)進(jìn)行區(qū)分刊棕!所以我們需要將代碼修改一下下:

import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const state={
    nodeVoteCount:1,//node的初始票數(shù)
    vueVoteCount:2,//vue的初始票數(shù)
};
//生明一個(gè)常量mutations炭晒,將所有的mutation放入其中
const mutations={
    //為nodeVoteCount加1
    ADDNODEVOTE(state){//這里的state即是上面定義的state常量
        state.nodeVoteCount++;
    },
    //為vueVoteCount加1
    ADDVUEVOTE(state){//這里的state即是上面定義的state常量
        state.vueVoteCount++;
    }
}
export default new Vuex.Store({//暴露Store對(duì)象
    state,
    mutations//將mutations進(jìn)行暴露
})

到目前為止已經(jīng)將mutation方法配置好了,那么接下來(lái)要做的事就是讓按鈕來(lái)觸發(fā)mutation即可甥角。觸發(fā)的時(shí)候需要用到store.commit方法网严,修改App.vue:

  <div id="app">
      <div><h2>總票數(shù):{{nodeVoteCount+vueVoteCount}}</h2></div>
      <div>
          <img src="./assets/node.png">
          <h3>如何通過(guò)node.js對(duì)數(shù)據(jù)進(jìn)行MD5加密</h3>
          <!--通過(guò)store.commit來(lái)調(diào)用mutations的addNodeVote方法-->
          <input type="button" value="投票" @click="$store.commit('ADDNODEVOTE')">票數(shù):{{nodeVoteCount}}
      </div>
      <hr/>
      <div>
          <img src="./assets/vuex.png">
          <h3>真正掌握vuex的使用方法(一)</h3>
          <!--通過(guò)store.commit來(lái)調(diào)用mutations的addVueVoteCount方法-->
          <input type="button" value="投票" @click="$store.commit('ADDVUEVOTE')">票數(shù):{{vueVoteCount}}
      </div>
  </div>

你會(huì)發(fā)現(xiàn)點(diǎn)擊按鈕的效果達(dá)到了你的預(yù)期,一切都在朝著好的方向發(fā)展嗤无!那這個(gè)mutation方法可以接收值嗎震束?當(dāng)然可以!咱們現(xiàn)在在原來(lái)的基礎(chǔ)之上再給加一個(gè)按鈕当犯,點(diǎn)擊該按鈕讓票數(shù)加2垢村,修改App.vue:

    <div id="app">
        <div><h2>總票數(shù):{{nodeVoteCount+vueVoteCount}}</h2></div>
        <div>
            <img src="./assets/node.png">
            <h3>如何通過(guò)node.js對(duì)數(shù)據(jù)進(jìn)行MD5加密</h3>
            <!--通過(guò)store.commit來(lái)調(diào)用mutations的addNodeVote方法-->
            <input type="button" value="投票" @click="$store.commit('ADDNODEVOTE')">
            <!--commit方法的第二個(gè)參數(shù)即為要傳入的值-->
            <input type="button" value="加2" @click="$store.commit('ADDNODEVOTE',2)">票數(shù):{{nodeVoteCount}}
        </div>
        <hr/>
        <div>
            <img src="./assets/vuex.png">
            <h3>真正掌握vuex的使用方法(一)</h3>
            <!--通過(guò)store.commit來(lái)調(diào)用mutations的addVueVoteCount方法-->
            <input type="button" value="投票" @click="$store.commit('ADDVUEVOTE')">
            <!--commit方法的第二個(gè)參數(shù)即為要傳入的值-->
            <input type="button" value="加2" @click="$store.commit('ADDVUEVOTE',2)">票數(shù):{{vueVoteCount}}
        </div>
    </div>

然后再對(duì)store.js進(jìn)行下調(diào)整:

import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const state={
    nodeVoteCount:1,//node的初始票數(shù)
    vueVoteCount:2,//vue的初始票數(shù)
};
//生明一個(gè)常量mutations,將所有的mutation放入其中
const mutations={
    //為nodeVoteCount加1,voteNum為增加的值嚎卫,默認(rèn)加1
    ADDNODEVOTE(state,voteNum=1){//這里的state即是上面定義的state常量
        state.nodeVoteCount+=voteNum;
    },
    //為vueVoteCount加1,voteNum為增加的值嘉栓,默認(rèn)加1
    ADDVUEVOTE(state,voteNum=1){//這里的state即是上面定義的state常量
        state.vueVoteCount+=voteNum;;
    }
}
export default new Vuex.Store({//暴露Store對(duì)象
    state,
    mutations//將mutations進(jìn)行暴露
})

到此再cnpm run dev。現(xiàn)在的你可以想加1加1,想加2加2了侵佃!是不是很爽钓账?
做到目前這一步碳褒,肯定有人在想:在view調(diào)用mutation方法的時(shí)候有沒(méi)有簡(jiǎn)寫(xiě)的方式?有高蜂!不過(guò)這個(gè)要寫(xiě)到methods里跳纳,最終App.vue:

<template>
    <div id="app">
        <div><h2>總票數(shù):{{nodeVoteCount+vueVoteCount}}</h2></div>
        <div>
            <img src="./assets/node.png">
            <h3>如何通過(guò)node.js對(duì)數(shù)據(jù)進(jìn)行MD5加密</h3>
            <!--直接調(diào)用ADDNODEVOTE-->
            <input type="button" value="投票" @click="ADDNODEVOTE()">
            <!--直接調(diào)用ADDNODEVOTE-->
            <input type="button" value="加2" @click="ADDNODEVOTE(2)">票數(shù):{{nodeVoteCount}}
        </div>
        <hr/>
        <div>
            <img src="./assets/vuex.png">
            <h3>真正掌握vuex的使用方法(一)</h3>
            <!--直接調(diào)用ADDVUEVOTE-->
            <input type="button" value="投票" @click="ADDVUEVOTE()">
            <!--直接調(diào)用ADDVUEVOTE-->
            <input type="button" value="加2" @click="ADDVUEVOTE(2)">票數(shù):{{vueVoteCount}}
        </div>
    </div>
</template>

<script>
    import {mapState,mapMutations} from "vuex";
    export default {
        name: 'App',
        methods:{
            ...mapMutations(["ADDNODEVOTE","ADDVUEVOTE"]),
            ...{
                //寫(xiě)自己定義的方法
            }
        },
        computed:{
            ...mapState(["nodeVoteCount","vueVoteCount"]),
            ...{
                //自己的屬性可以在這里面寫(xiě)哦
            }
        }
    }
</script>
注意:mutations里的操作必須是同步的小压。那好奇的小伙伴一定在想锻梳,如果我寫(xiě)一些異步的操作俏橘,會(huì)如何呢?哈哈井联,也不會(huì)發(fā)生什么讓人驚訝的事情!只不過(guò)官方推薦不要在mutation方法內(nèi)寫(xiě)異步操作您旁!

未完烙常,待續(xù)!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鹤盒,一起剝皮案震驚了整個(gè)濱河市蚕脏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌侦锯,老刑警劉巖驼鞭,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異尺碰,居然都是意外死亡挣棕,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)亲桥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)洛心,“玉大人,你說(shuō)我怎么就攤上這事题篷〈噬恚” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵番枚,是天一觀的道長(zhǎng)法严。 經(jīng)常有香客問(wèn)我,道長(zhǎng)葫笼,這世上最難降的妖魔是什么深啤? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮渔欢,結(jié)果婚禮上墓塌,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好苫幢,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布访诱。 她就那樣靜靜地躺著,像睡著了一般韩肝。 火紅的嫁衣襯著肌膚如雪触菜。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,929評(píng)論 1 290
  • 那天哀峻,我揣著相機(jī)與錄音涡相,去河邊找鬼。 笑死剩蟀,一個(gè)胖子當(dāng)著我的面吹牛催蝗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播育特,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼丙号,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了缰冤?” 一聲冷哼從身側(cè)響起犬缨,我...
    開(kāi)封第一講書(shū)人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎棉浸,沒(méi)想到半個(gè)月后怀薛,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡迷郑,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年枝恋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片三热。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鼓择,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出就漾,到底是詐尸還是另有隱情呐能,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布抑堡,位于F島的核電站摆出,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏首妖。R本人自食惡果不足惜偎漫,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望有缆。 院中可真熱鬧象踊,春花似錦温亲、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至史隆,卻和暖如春魂务,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背泌射。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工粘姜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人熔酷。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓孤紧,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親拒秘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子坛芽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

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