Vuex_getters_mapState_mapGetters_mapMutations_mapActions

1. getters

        getters 也是vuex中的配置项之一，同初识 vuex 的配置项一样向 store 中配置，getters中包含的是函数

export default new Vuex.Store({
    getters
})

        调用

$store.getters.Function

        getters 和 state(vuex中的数据源) 的关系可以类比为 computed 和 data(vue中的数据源) 的关系，可以概括为根据数据计算新的数据，可以用也可以不用，当逻辑复杂或者逻辑复用，可以尽量使用getters

2. mapState

        首先引入一个小案例，我们发现，在计算属性中多次使用store调用state中的不同属性，那么我们有没有更好的办法去掉这些冗余的部分呢，当然是有的，方法是从vuex中引入mapState函数

        具体思路是 因为在计算属性中的所有函数只有函数名和所取属性名不一样，其余均相同，于是 vuex 引入的 mapState 函数中只需要我们提供函数名和属性名即可 

export default {
    computed: {
        // 我们可以发现这些代码都有很多重复的地方，从store中调state对象中的某个属性
        // vuex中可以批量生成这些代码
        getSum(){
          return this.$store.state.sum;
        },
        getUsername(){
          return this.$store.state.username;
        },
        getAge(){
          return this.$store.state.age;
        },
    },
};

        具体如下

         去掉冗余，选择在生命周期中的 mounted 钩子上加载，mapState 作为一个函数，参数是一个配置对象，以 key-value 的形式存在，只需要我们提供函数名和所取的属性名即可得到属性

import { mapState } from "vuex";
export default {
    mounted() {
        const moreFun = mapState({
          getSum: "sum",
          getUsername: "username",
          getAge: "age",
        });
    },
};

        这是用对象的写法写出 mapState ，当函数名和所取属性名相同时，我们可以借助数组方法写出更简单的 mapState ,此时依然可以调用

        此时 mapState 没有用变量接收，得到的会是一个对象，需要用以下写法，将 mapState 对象中的 key-value 依次取出放入计算属性中

import { mapState } from "vuex";
export default {
    computed() {
        ...mapState(["sum", "username", "age"]),
    },
};

3. mapGetters

        mapGetters同mapState一样配置，仅仅是使用的不一样，mapState是对于数据源的索取，mapGetters是对于getters中的函数的索取

        同样mapGetters也可以采用对象写法，但这里采用更简洁的数组写法

import { mapGetters } from "vuex";
export default {
    computed() {
        ...mapGetters(["bigSum"]),
    },
};

4. mapMutations 

         同上，mapMutations 也是一样的导入和配置方法，提供函数名和要commit的函数名，同时也有对象写法，这里使用数组写法时，调用的函数和 commit 的函数名要相同

import { mapMutations } from "vuex";
export default {
    methods() {
        ...mapMutations(['ADDNUM', 'SUBNUM']);
    },
};

        要注意vuex帮我们生成的函数和我们自己配置的函数可能有所区别

        下面借助这段代码来演示

export default {
    methods: {
        // 对比两种生成方法
        ADDNUM() {
          this.$store.commit("ADDNUM", this.n);
        },
        // mapMutations()为我们生成的方法
        ADDNUM(value){
          this.$store.commit('ADDNUM', value);
        }
        // 此时在我们用add的时候是没有传参的，这样value的值默认为event
        // 而我们设置的是一个按钮，此时就会产生一个对象和一个其他类型 相加
    }
}

         如果我们没有传参，则 vuex 帮我们生成的函数默认是一个带事件参数(event)的函数，如果用鼠标点击则传入鼠标事件，而事件大多数都是一个对象，当我们利用vuex的函数将事件对象作为参数传进时，可能会导致相加后产生 NAN

        因此借助vuex生成mapMutations函数时请传入参数，如果不传入，则利用事件来产生不同的响应 

5. mapActions 

        同上配置方法，借助mapActions生成对应方法，调用dispatch联系actions，同时也有对象写法

import { mapActions } from "vuex";
export default {
    methods() {
        ...mapMutations(['oddadd', 'waitadd']);
    },
};

6.案例 

使用四种扩展的简单写法

vue组件    CountSum.vue

<template>
  <div>
    <h1>当前求和为: {{ sum }}</h1>
    <h2>放大十倍后的和为: {{ bigSum }}</h2>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="ADDNUM(n)">+</button>
    <button @click="SUBNUM(n)">-</button>
    <button @click="oddadd(n)">当前求和为奇数再加</button>
    <button @click="waitadd(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
// 引入vuex中的mapState帮我们批量生成代码
export default {
  name: "CountSum",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  methods: {
    ...mapMutations(["ADDNUM", "SUBNUM"]),
    ...mapActions(["oddadd", "waitadd"]),
  },
  computed: {
    ...mapState(["sum", "username", "age"]),
    ...mapGetters(["bigSum"]),
  },
};
</script>

<style>
button {
  margin-left: 10px;
}
</style>

js 文件    index.js

// 该文件用于创建vuex中的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {
    oddadd(context, value) {
        if (context.state.sum % 2) {
            context.commit('ODDADD', value);
        }
    },
    waitadd(context, value) {
        setTimeout(() => {
            context.commit('WAITADD', value);
        }, 2000)
    }
}

const mutations = {
    ADDNUM(state, value) {
        state.sum += value;
    },
    SUBNUM(state, value) {
        state.sum -= value;
    },
    ODDADD(state, value) {
        state.sum += value;
    },
    WAITADD(state, value) {
        state.sum += value;
    }
}

// state 用于存储数据
const state = {
    sum: 0, // 当前的和
    username: 'Liiii',
    age: 19
}

// 引出 getters
const getters = {
    bigSum(state) {
        return state.sum * 10;
    }
}

// 创建store,并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})