vuex-mapGetters使用案例解析

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    msg:"Hello Vuex!",
    name:"cxj",
    age:18,
    hobby:"美女"
  },
  getters: {
    tenYearsOld(state){
      return state.age + 10;
    },
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

App.vue

<template>
  <div id="app">
    計算屬性賦值ctenYearsOld:{{ctenYearsOld}}
    <hr>
    mapGetters賦值tenYearsOld:{{tenYearsOld}}
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex';

/*
ctenYearsOld:元件較多，且每個元件都要進行相同操作時，每個元件都需要定義，程式碼重複

Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據
它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

mapGetters輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：多個元件都需要用的時候只用定義一次。
*/
export default {
  name: 'App',
  components: {
  },
  computed: {
    ...mapState(["msg","name","age"]),
    ...mapGetters(["tenYearsOld"]),
    ctenYearsOld(state){
      return state.age + 10;
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果截圖：