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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,153评论 0 6
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,040评论 4 111
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,472评论 0 7
  • 众生相之周颖豪 一开始,看他总是又说又笑挺闹腾,总是那么活络,觉得他也是机灵过了头的。 偏偏了解多了,...
    75eab3043e61阅读 258评论 0 0