gatter(相当于computed)

  • 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。(需求逻辑复杂斌且要求复用)
  • 使用流程
    • 1.在store.js中追加getters配置
    • 2.组件中读取数据：$store.getters.bigSum

代码解析:(给求和案例添加一个sum*10并显示,在getters里面实现)

  • index.js(store)代码片段
    //准备state——用于存储数据
    const state = {
        sum:0 //当前的和
    }
    // 配置vuex中的配置向gatter(相当于computed)
    // 用于将state中的数据进行加工
    const getters = {
        // 这里接收一个参数就是state
        tenSum(state){
            // 这就显示出与计算属性非常的相像,都是需要返回值返回数据的
            return state.sum*10
        }
    }

    //创建并暴露store
    export default new Vuex.Store({
        actions,
        mutations,
        state,
        getters,
    })
  • Count组件当中调用:(同样是代码片段)
    <!-- 读取vuex中的数据 -->
    <h1>当前求和为：{{$store.state.sum}}</h1>
    <!-- 这里调用$store.getters去寻找里面的“计算属性” -->
    <h3>当前求和放大10倍未:{{$store.getters.tenSum}}</h3>

结果展示:

image

四个map方法的使用

  • 这四个方法主要是用于解决代码冗余,简化模板代码的作用,是vuex提供的四个方法

1. mapState方法：用于帮助我们映射state中的数据为计算属性

  • 这里展示Count组件的computed的代码片段
    computed:{
        // 程序员常规使用代码实现-----------------------------------------
        // doing(){
        //  return this.$store.state.doing
        // },
        // place(){
        //  return this.$store.state.place
        // },
        // ---------------------------------------------------------

        // (1)mapState*********************************************
        // 1.使用mapState简化模板代码(对象式)[使用Es6铺开对象解构赋值]
        // ...mapState({doing:'doing',place:'place'})

        // 2.使用mapState简化模板代码(数组式)[使用Es6铺开对象解构赋值]
        // 使用数组形式切记你所要生成的计算属性名一定要与state里面的属性名保持一致
        ...mapState(['doing','place']),
        // **********************************************************

    },

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

  • 这里展示Count组件的computed的代码片段
    computed:{
        // 常规使用代码替换-----------------------------------------
        // tenSum(){
        //  return this.$store.getters.tenSum
        // },
        // ---------------------------------------------------------

        // (2)mapGetters**********************************************
        // 1.使用mapGetters简化模板代码(对象式)[使用Es6铺开对象解构赋值]
        // ...mapGetters({tenSum:'tenSum'}),

        // 2.使用mapGetters简化模板代码(数组式)[使用Es6铺开对象解构赋值]
        // 使用数组形式切记你所要生成的计算属性名一定要与Getters里面的属性名保持一致
        ...mapGetters(['tenSum']),
        // *************************************************************
        },

3. mapActions方法：

  • 用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
  • 这里展示Count组件的methods的代码片段
    methods: {
        // 程序员常用的代码编写实现--------------------------------------
        // add(){
        //  // 因为纯加减没有业务逻辑可以让组件越过actions直接联系mutations
        //  // 这里的大写是用于区分存在actions(小写)还是mutations(大写)
        //  // 组件->mutations(无业务逻辑)
        //  this.$store.commit('ADD',this.n)
        // },
        // sub(){
        //  // 因为纯加减没有业务逻辑可以让组件越过actions直接联系mutations
        //  // 这里的大写是用于区分存在actions(小写)还是mutations(大写)
        //  // 组件->mutations(无业务逻辑)
        //  this.$store.commit('SUB',this.n)
        // },
        // ---------------------------------------------------------------

        // (3)mapMutations**********************************************
        // 1.使用mapMutations简化模板代码(对象式)[使用Es6铺开对象解构赋值]
        ...mapMutations({add:'ADD',sub:'SUB'}),

        // 2.使用mapMutations简化模板代码(数组式)[使用Es6铺开对象解构赋值]
        // 使用数组形式切记你所要生成的方法名一定要与传过去mutations里面的方法名保持一致
        // ...mapMutations({'add','sub'}),
        // *************************************************************
    },

4. mapMutations方法：

  • 用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
  • 这里展示Count组件的methods的代码片段
    methods: {
        // 程序员常用的代码编写实现--------------------------------------
        // addOdd(){
        //  // 组件->actions->mutations(有业务逻辑:奇数＋)
        //  this.$store.dispatch('addOdd',this.n)
        // },
        // addWait(){
        //  // 组件->actions->mutations(有业务逻辑:延迟+)
        //  this.$store.dispatch('addWait',this.n)
        // },
        // ---------------------------------------------------------------

        // (4)mapActions************************************************
        // 1.使用mapActions简化模板代码(对象式)[使用Es6铺开对象解构赋值]
        // ...mapActions({addOdd:'addOdd',addWait:'addWait'}),

        // 2.使用mapMutations简化模板代码(数组式)[使用Es6铺开对象解构赋值]
        // 使用数组形式切记你所要生成的方法名一定要与传过去mutations里面的方法名保持一致
        ...mapActions(['addOdd','addWait']),
        },

下面展示Counte组件当中调用的代码:(只显示模板片段)

<template>
    <div>
        <!-- 读取vuex中的数据 -->
        <h1>当前求和为：{{$store.state.sum}}</h1>
        <!-- 通过mapState简化代码后可以直接方法名即可 -->
        <h3>当前求和放大10倍未:{{tenSum}}</h3>
        <!-- 通过mapGetters简化代码后可以直接方法名即可 -->
        <h2>我在{{place}},{{doing}}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <!-- 这里是使用mapMutations和mapActions一定要传参(如果有参数的话) -->
        <!-- 有参数传入不传参的话默认会拼接事件(event) -->
        <button @click="add(n)">+</button>
        <button @click="sub(n)">-</button>
        <button @click="addOdd(n)">当前求和为奇数再加</button>
        <button @click="addWait(n)">等一等再加</button>
    </div>
</template>

再次提醒:

  • mapActions与mapMutations使用时，若有传递参数需要：在模板中绑定事件时传递好参数，否则参数默认就是事件对象(event),那么结果出来就是事件对象拼接而成的字符串。