真正掌握vuex的使用方法（四）
接下来看一下template当中计算总票数的表达式：
<div><h2>总票数：{{nodeVoteCount+vueVoteCount}}</h2></div>是不是很长？是不是看着它很蓝瘦？ 正常的第一反应就是将其写入到计算属性内，方便调用！所以咱们可以将computed调整如下：
computed:{
...mapState(["nodeVoteCount","vueVoteCount"]),
...{
sumCount(){//计算属性，求两个票数之和
return this.nodeVoteCount+this.vueVoteCount;
}
}
}然后再将template的总票数表达式修改为：
<div><h2>总票数：{{sumCount}}</h2></div>是不是有种整个世界都很清静的感脚？哈，还没完，继续！ 在咱们的vuex当中，有一个和vue中的computed类似，都是用来计算state然后生成新的状态（数据）的，请记住它的名字叫做------getters。 打开store.js为其添加一常量getters:
//getters为vuex当中的计算属性
const getters={
//求总票数之和
sumCount(state){//state即是存储状态的对象
return state.nodeVoteCount+state.vueVoteCount
}
}然后将这个常量放入到Store当中，最终的store.js为：
import Vue from 'vue';//引用vue
import Vuex from 'vuex';//引用vuex
Vue.use(Vuex);//使用vuex
const state={
nodeVoteCount:1,//node的初始票数
vueVoteCount:2,//vue的初始票数
};
//生明一个常量mutations，将所有的mutation放入其中
const mutations={
//为nodeVoteCount加1,voteNum为增加的值，默认加1
ADDNODEVOTE(state,voteNum=1){//这里的state即是上面定义的state常量
state.nodeVoteCount+=voteNum;
},
//为vueVoteCount加1,voteNum为增加的值，默认加1
ADDVUEVOTE(state,voteNum=1){//这里的state即是上面定义的state常量
state.vueVoteCount+=voteNum;;
}
}
//getters为vuex当中的计算属性
const getters={
sumCount(state){//state即是存储状态的对象
return state.nodeVoteCount+state.vueVoteCount
}
}
export default new Vuex.Store({//暴露Store对象
state,
mutations,//将mutations进行暴露
getters//将getters常量放入到Store当中
})最后一步，在App.vue当中通过$store.getters调用一下sumCount即可，调用方法：
<div><h2>总票数：{{$store.getters.sumCount}}</h2></div>当然，调用getter也有简写的形式，比如我要将上面代码改写成：
<div><h2>总票数：{{sumCount}}</h2></div>那么就需要在计算属性内进行一些设置 首先在引入vuex时，添加mapGetters：
import {mapState,mapMutations,mapGetters} from "vuex";然后将mapGetters添加到computed中:
computed:{
...mapState(["nodeVoteCount","vueVoteCount"]),
...mapGetters(["sumCount"]),//需要的getter为sumCount
}修改后的完整App.vue:
<template>
<div id="app">
<div><h2>总票数：{{sumCount}}</h2></div>
<div>
<img src="./assets/node.png">
<h3>如何通过node.js对数据进行MD5加密</h3>
<!--直接调用ADDNODEVOTE-->
<input type="button" value="投票" @click="ADDNODEVOTE()">
<!--直接调用ADDNODEVOTE-->
<input type="button" value="加2" @click="ADDNODEVOTE(2)">票数:{{nodeVoteCount}}
</div>
<hr/>
<div>
<img src="./assets/vuex.png">
<h3>真正掌握vuex的使用方法（一）</h3>
<!--直接调用ADDVUEVOTE-->
<input type="button" value="投票" @click="ADDVUEVOTE()">
<!--直接调用ADDVUEVOTE-->
<input type="button" value="加2" @click="ADDVUEVOTE(2)">票数：{{vueVoteCount}}
</div>
</div>
</template>
<script>
import {mapState,mapMutations,mapGetters} from "vuex";
export default {
name: 'App',
methods:{
...mapMutations(["ADDNODEVOTE","ADDVUEVOTE"]),
...{
//写自己定义的方法
}
},
computed:{
...mapState(["nodeVoteCount","vueVoteCount"]),
...mapGetters(["sumCount"])
}
}
</script>注意 : getter当中的值是不能直接修改的 , 它是根据指定的state的变化而变化的！ 今天就到这，未完，待续！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-05-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读