vuex 2.0學習心得（下）--- getter
1. Getter 就是把元件中共有的對state的操作進行了提取，它就相當於對state的computed.所以它會獲得state作為第一個引數。
2. 有的元件中獲取到 store中的state, 需要對進行加工才能使用，computed屬性中就需要寫操作函式
3. 如果有多個元件中都需要進行這個操作，那麼在各個元件中都寫相同的函式，那就非常麻煩，這時可以把這個相同的操作寫到store中的getters, 每個元件只要引用getter就可以了，非常方便。
假設我們在點選increment
display.vue 修改如下：
<template>
<div>
<h3>Count is {{count}}</h3>
<h3>AnoterIncrement is{{countAnother}}</h3>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
computed: {
...mapState(["count"]),
countAnother: function () { // 獲取state
return this.$store.getters.countAnother;
}
}
}
</script>
ncrement.vue 修改如下，這裡dispatch中，只能接受一個引數，如果我們要傳多個引數的話，需要把所有的引數組裝成物件。
<script>
import {mapActions} from "vuex";
export default {
data() {
return {
incrementValue: 0
}
},
computed: {
show: function() {
return this.$store.state.waiting;
},
countAnother: function () { // 獲取getters
return this.$store.getters.countAnother;
}
},
methods: {
...mapActions(["increment","decrement"]),
incrementWithValue() {
// dispatch只能接受一個引數，需要傳物件引數
this.$store.dispatch("incrementWithValue", { value:this.incrementValue, anotherValue:this.countAnother})
}
}
}
</script>
store.js 修改如下：
conststore = new Vuex.Store({
state: {
count:0,
//新增waiting 狀態
waiting: false,
//額外需要增加的數字
anotherIncrement: 5
},
mutations: {
//加1
INCREMENT(state) {
state.count++;
},
//減1
DECREMENT(state) {
state.count--
},
INCREMENT_WITH_VALUE(state, value){
state.count = state.count +value.intValue + value.anotherValue;
},
//顯示和隱藏waiting
SHOW_WAITING_MESSAGE(state){
state.waiting = true;
},
HIDE_WAITING_MESSAGE(state){
state.waiting = false;
}
},
actions: {
increment({commit}){
commit("INCREMENT")
},
decrement({commit}){
commit("DECREMENT")
},
incrementWithValue({commit}, value){
commit("SHOW_WAITING_MESSAGE");
let intValue =parseInt(value.value)
let anotherValue =value.anotherValue
setTimeout(function() {
if(isNaN(intValue)) {
alert("Not anInterger")
}else {
commit("HIDE_WAITING_MESSAGE");
commit("INCREMENT_WITH_VALUE", {intValue, anotherValue})
}
}, 2000)
}
},
getters: { // getters
countAnother: function (state) {
return state.anotherIncrement
}
}
})
vuex也提供了mapGetters方法，和其的mapState,mapActions是一樣的，如果元件中使用的getters和store裡面的getters 相同，那就用陣列形式，如果不相同，那就要用物件形式。
increment.vue修改一下：
computed: {
show: function() {
return this.$store.state.waiting;
},
...mapGetters{["countAnother"]}
},
到這裡，vuex中的 state, action,mutation, getter等重要概念就介紹完了，但是，我們把所有的getters, actions, mutations都寫到的store 中，如果有很多的話，程式碼可讀性太差，所以就需要 action建立一個actions.js檔案，mutations建立一個mutation.js檔案，getters也建立一個getters.js檔案，state 作為主要的入口檔案命名為index.js，把這四個js檔案放到store資料夾中。
state所在的檔案命名為index.js還和 nodejs 載入模組有關。如果不命名為index.js ,那假設命名為store.js.
在store.js,我們暴露出通過 new Vuex.Store建構函式生成的store物件（exportdefault new Vuex.Store({...})）,這個store 物件需要在 main.js 中引入，然後注入到vue 根例項中。所以在 main.js 中需要寫入 import store from './store/store.js', 後面的路徑就比較長了。如果我們命名為 index.js，我們可以直接寫 importstore from './store', 後面的路徑直接到資料夾名就可以了，index.js可以省略。node 在載入資料夾模組的時候，有如下規定:
var mode = require(“./moduleDir”);
如果moduleDir 是一個資料夾名，Node 就會在指定的資料夾下查詢模組。Node 會假定該資料夾是一個包，並試驗查詢包定義。 包定義在名為 package.json 檔案中。如果資料夾中沒有package.json, 那麼就會查詢index.js檔案，相當於載入 var mode = require(“./moduleDir/index.js”). 如果有package.json 檔案，就會查詢檔案中的 main屬性，如下package.json檔案, 相當於載入 var mode = require(“./moduleDir/lib/mymodldule.js”)
{ “name”:“myModule”, “main” :“./lib/myModule.js”}
在src目錄下，新建store.js資料夾，裡面新建getters.js,actions.js, mutations.js, index.js檔案。
getters.js 檔案如下：
export default {
countAnother: function (state) {
return state.anotherIncrement
}
}
actions.js 檔案如下：
export default {
increment({commit}){
commit("INCREMENT")
},
decrement({commit}){
commit("DECREMENT")
},
incrementWithValue({commit}, value){
commit("SHOW_WAITING_MESSAGE");
let intValue = parseInt(value.value)
let anotherValue = value.anotherValue
setTimeout(function() {
if(isNaN(intValue)) {
alert("Not anInterger")
}else {
commit("HIDE_WAITING_MESSAGE");
commit("INCREMENT_WITH_VALUE", {intValue, anotherValue})
}
}, 2000)
}
}
muations 檔案如下：
export default {
// 加1
INCREMENT(state) {
state.count++;
},
// 減1
DECREMENT(state) {
state.count--
},
INCREMENT_WITH_VALUE(state, value){
state.count = state.count +value.intValue + value.anotherValue;
},
// 顯示和隱藏waiting
SHOW_WAITING_MESSAGE(state){
state.waiting = true;
},
HIDE_WAITING_MESSAGE(state){
state.waiting = false;
}
}
index.js 檔案如下：
import Vuefrom "vue";
importVuex from "vuex";
Vue.use(Vuex);
// 引入actions, mutations,getters
importactions from "./actions.js"
importmutations from "./mutations.js"
importgetters from "./getters.js"
conststate = {
count:0,
// 新增waiting 狀態
waiting: false,
// 額外需要增加的數字
anotherIncrement: 5
}
export defaultnew Vuex.Store({
state,
mutations,
actions,
getters
})