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;


組件中使用：

<template>
  <div id="salary-list-second">
    <button @click="incrementFun">+</button>
    <button @click="reductionFun">-</button>
    <p>{{currentCount}}</p>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "salary-list-second",
  computed: mapState({
    currentCount: state => state.count
  }),
  methods: {
    incrementFun() {
      this.$store.commit("increment");
    },
    reductionFun() {
      this.$store.commit("reduction");
    }
  }
};
</script>
<style>
button {
  padding: 0.2rem;
}
p {
  line-height: 0.5rem;
}
</style>



（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;


組件中代碼：

<template>
  <div id="salary-list-fisrt">
    <h2>財富榜</h2>
    <ol>
      <li v-for="(salary, index) in getterSalaryList"
          :key="index">
        {{salary.name}}的工資是：{{salary.salaryAmount}}
      </li>
    </ol>
  </div>
</template>
<script>
export default {
  name: "salary-list-first",
  computed: {
    getterSalaryList() {
      return this.$store.getters.doubleSalaryList;
    }
  }
};
</script>


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;


組件中的應用：

<template>
  <div id="salary-list-fisrt">
    <h2>財富榜</h2>
    <ol>
      <li v-for="(salary, index) in myDoubleSalaryGetter"
          :key="index">
        {{salary.name}}的工資是：{{salary.salaryAmount}}
      </li>
    </ol>
    <span>工資總額是：{{myTotalSalary}} $</span>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "salary-list-first",
  computed: {
    ...mapGetters({
      myDoubleSalaryGetter: "doubleSalaryList",
      myTotalSalary: "totalSalary"
    })
  }
};
</script>