>[success] # getters-- 擴展 ~~~ 1.上面的參數使用理解章節簡單的示范了getters 2.官方文檔中還給了更簡單的使用方法，我們可以不使用 'this.$store.getters.存值的名稱',這種方式獲取值,使用提供的'mapGetters 輔助函數' ~~~ >[info] ## mapState 輔助函數 ~~~ 1.Vuex 給我們提供了輔助函數，使用的時候只需要引入輔助函數即可: import { mapGetters } from 'vuex' 2.上面的引入方式用了es6的結構賦值，相當于下面的寫法: import vuex from 'vuex' const mapGetters = vuex.mapGetters ~~~ >[danger] ##### 官方給的幾種寫法 * Getter 也可以接受其他 getter 作為第二個參數： ~~~ getters: { // ... doneTodosCount: (state, getters) => { return getters.doneTodos.length } } ~~~ * `mapGetters`輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性： ~~~ import { mapGetters } from 'vuex' export default { // ... computed: { // 使用對象展開運算符將 getter 混入 computed 對象中 // 這樣使用如果沒有使用命名空間方式的話，他會自己去找模塊中對應的gettters ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } ~~~ * 如果你想將一個 getter 屬性另取一個名字，使用對象形式： ~~~ mapGetters({ // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) ~~~ >[danger] ##### 使用mapState 輔助函數 改造參數理解章節案例 ~~~ <template> <div> <p>{{appNameWithVersion}}</p> </div> </template> <script> import { mapGetters } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{}, computed:{ ...mapGetters(['appNameWithVersion']) } } </script> <style scoped> </style> ~~~