1. 程式人生 > >(轉)vuex2.0 基本使用(3) --- getter

(轉)vuex2.0 基本使用(3) --- getter

mua padding 實例 border incr right -s intval transform

有的組件中獲取到 store 中的state, 需要對進行加工才能使用,computed 屬性中就需要寫操作函數,如果有多個組件中都需要進行這個操作,那麽在各個組件中都寫相同的函數,那就非常麻煩,這時可以把這個相同的操作寫到store 中的getters, 每個組件只要引用getter 就可以了,非常方便。Getter 就是把組件中共有的對state 的操作進行了提取,它就相當於 對state 的computed. 所以它會獲得state 作為第一個參數。

  假設我們在點擊increment按鈕的時候,再增加一個額外的數,那麽就需要在display.vue 中顯示我們多增加了哪個數,同時在increment.vue 中要獲得這個數進行相加。state 狀態中增加 anotherIncrement: 5.要獲取到state 中的這個值, 在每個組件中都要寫computed: this.$store.state. countAnother, 這時就可以用getters, 然後在每個組件中computed 中使用getter.

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>
技術分享圖片

increment.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 修改如下:

技術分享圖片
const store = 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 an Interger")
                }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 對象(export default new Vuex.Store({...})), 這個store 對象需要在 main.js 中引入,然後註入到vue 根實例中。所以在 main.js 中需要寫入 import store from ‘./store/store.js‘, 後面的路徑就比較長了。如果我們命名為 index.js, 我們可以直接寫 import store 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 an Interger")
            }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 Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

// 引入actions, mutations, getters
import actions from "./actions.js"
import mutations from "./mutations.js"
import getters from "./getters.js"


const state = {
    count:0,
    // 新增waiting  狀態
    waiting: false,
    // 額外需要增加的數字
    anotherIncrement: 5
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

(轉)vuex2.0 基本使用(3) --- getter