vuex学习与实践二——mapState、getter、mapGetters

1、mapState辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
（1）首先需要在组件中引用才可以使用

import { mapState } from 'vuex'

（2）mapState使用前后对比：

// 不使用mapState时：
computed: {
    count () {
      return this.$store.state.count
    }
  }
// 使用mapState时：
computed: mapState({
       count: state => state.count,
})

如果在大批量的类似这种的计算属性的话，使用 mapState 会更加便捷。
（3）具体使用
store.js中：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduction(state) {
      state.count--;
    }
  }
});
export default store;

组件中使用：

（4）mapState和计算属性前后写法的对比举例

// states 为对象时候，mapState转换前
computed: mapState({
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
        return state.count + this.localCount
    }
})

// states 为对象时候，mapState转换后
computed: { 
    count() { 
        return this.$store.state.count 
    },
    countAlias() {
        return this.$store.state['count']
    }, 
    countPlusLocalState() { 
        return this.$store.state.count + this.localCount 
    } 
}

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

2、getter
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    storeSalaryList: [
      {
        name: "马云",
        salaryAmount: 1000
      },
      {
        name: "马化腾",
        salaryAmount: 900
      },
      {
        name: "李彦宏",
        salaryAmount: 800
      }
    ]
  },
  getters: {
    doubleSalaryList(state) {
      let newArr = state.storeSalaryList.map(item => {
        return {
          name: item.name,
          salaryAmount: item.salaryAmount * 2 + " " + "$"
        };
      });
      return newArr;
    }
});
export default store;

组件中代码：

3、mapGetters辅助函数
store.js中的代码：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    storeSalaryList: [
      {
        name: "马云",
        salaryAmount: 1000
      },
      {
        name: "马化腾",
        salaryAmount: 900
      },
      {
        name: "李彦宏",
        salaryAmount: 800
      }
    ]
  },
  getters: {
    doubleSalaryList(state) {
      let newArr = state.storeSalaryList.map(item => {
        return {
          name: item.name,
          salaryAmount: item.salaryAmount * 2 + " " + "$"
        };
      });
      return newArr;
    },
    totalSalary(state) {
      let sum = 0;
      state.storeSalaryList.map(item => {
        sum += item.salaryAmount;
      });
      return sum * 2;
    }
  }
});
export default store;

组件中的应用：