接下来看一下template当中计算总票数的表达式:
总票数:{{nodeVoteCount+vueVoteCount}}
是不是很长?是不是看着它很蓝瘦?
正常的第一反应就是将其写入到计算属性内,方便调用!所以咱们可以将computed调整如下:
computed:{ ...mapState(["nodeVoteCount","vueVoteCount"]), ...{ sumCount(){//计算属性,求两个票数之和 return this.nodeVoteCount+this.vueVoteCount; } } }
然后再将template的总票数表达式修改为:
总票数:{{sumCount}}
是不是有种整个世界都很清静的感脚?哈,还没完,继续!
在咱们的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';//引用vueimport Vuex from 'vuex';//引用vuexVue.use(Vuex);//使用vuexconst 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即可,调用方法:
总票数:{{$store.getters.sumCount}}
当然,调用getter也有简写的形式,比如我要将上面代码改写成:
总票数:{{sumCount}}
那么就需要在计算属性内进行一些设置
首先在引入vuex时,添加mapGetters:
import {mapState,mapMutations,mapGetters} from "vuex";
然后将mapGetters添加到computed中:
computed:{ ...mapState(["nodeVoteCount","vueVoteCount"]), ...mapGetters(["sumCount"]),//需要的getter为sumCount}
修改后的完整App.vue:
总票数:{{sumCount}} 如何通过node.js对数据进行MD5加密 票数:{{nodeVoteCount}}
真正掌握vuex的使用方法(一) 票数:{{vueVoteCount}}
注意 : getter当中的值是不能直接修改的 , 它是根据指定的state的变化而变化的!
今天就到这,未完,待续!
作者:张培跃
链接:https://www.jianshu.com/p/6e5b71df3224