真正掌握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的变化而变化的！
今天就到这，未完，待续！

foot.png