接下來(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ù)!