第4節：getters計算過濾操作
阿新 • • 發佈：2018-01-23
maps pmu sets fun table 上傳 取數 們的 es6
上傳：
1、 assetsPublicPath: ‘./‘, 修改路徑
2、終端輸入 npm run build 命令 生成 dist 文件
3、把dist文件裏的冬冬上傳就可以了
getters從表面是獲得的意思，可以把他看作在獲取數據之前進行的一種再編輯,相當於對數據的一個過濾和加工。你可以把它看作store.js的計算屬性。
getters基本用法：
比如我們現在要對store.js文件中的count進行一個計算屬性的操作，就是在它輸出前，給它加上100.
我們首先要在store.js裏用const聲明我們的getters屬性。
| 1 2 3 4 5 | const getters = { count:function(state){ return state.count +=100; } } |
寫好了gettters之後，我們還需要在Vuex.Store()裏引入，由於之前我們已經引入了state盒mutations，所以引入裏有三個引入屬性。代碼如下，
| 1 2 3 | export default new Vuex.Store({ state,mutations,getters }) |
在store.js裏的配置算是完成了，我們需要到模板頁對computed進行配置。在vue 的構造器裏邊只能有一個computed屬性，如果你寫多個，只有最後一個computed屬性可用，所以要對上節課寫的computed屬性進行一個改造。改造時我們使用ES6中的展開運算符”…”。
| 1 2 3 4 5 6 | computed:{ ...mapState(["count"]), count(){ return this.$store.getters.count; } }, |
需要註意的是，你寫了這個配置後，在每次count 的值發生變化的時候，都會進行加100的操作。
用mapGetters簡化模板寫法：
我們都知道state和mutations都有map的引用方法把我們模板中的編碼進行簡化，我們的getters也是有的，我們來看一下代碼。
首先用import引入我們的mapGetters
| 1 | import { mapState,mapMutations,mapGetters } from ‘vuex‘; |
在computed屬性中加入mapGetters
| 1 | ...mapGetters(["count"]) |
相信大家已經會了getters的用法，那我們下節課見了。
第4節：getters計算過濾操作