vue vuex getter使用

getter的使用

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

store.js

Getter 接受 state 作为其第一个参数：

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 0,
        name: '刘旭',
        age: 22,
        getters: '用使的retteg是这'
    },

    // 就是公共的计算属性
    getters: {
        getterMsg: function(state) {
            return state.getters.split('').reverse().join('')
        }
    },

    mutations: {
        numAdd(state) {
            state.num += 2
        },
        setNum(state, value) {
            state.num = value
        }
    },
    actions: {

    },
    modules: {

    }
})

getter.vue

通过属性访问

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

this.$store.getters.getterMsg

<template>
    <div class="getter">
        <h2>{{gettersMsg}}</h2>
        <h2>{{name}}</h2>
        <h2>{{age}}</h2>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'getter',
    computed: {
        gettersMsg:function(){
            return this.$store.getters.getterMsg
        },
        ...mapState(['name','age'])
    },
   
}
</script>

辅助函数（mapGetter）

<template>
    <div class="getter">
        <h2>{{gettersMsg}}</h2>
        <h2>{{name}}</h2>
        <h2>{{age}}</h2>
        <h2>mapGetters之数组形式{{mapGetters}}</h2>
        <h2>mapGetters之对象形式{{liuxu}}</h2>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
    name: 'getter',
    computed: {
        gettersMsg:function(){
            return this.$store.getters.getterMsg
        },
        ...mapState(['name','age']),
        
        // 辅助函数mapGetters，可以数组形式，可以对象形式
        ...mapGetters(['getterMsg','mapGetters']),
        ...mapGetters({
            liuxu: 'mapGetters'
        })
    },
    
    // computed: mapGetters(['mapGetters']),
    
    // computed: mapGetters({liuxu: 'mapGetters'}),
}
</script>

上面代码中，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

mapGetters 辅助函数可以是数组形式：

// 解构赋值
...mapGetters(['getterMsg','mapGetters']),
// 或者
computed: mapGetter(['mapGetters'])

如果我们想将一个getter属性重新命名，就可以使用对象的形式

// 解构赋值
...mapGetters({
    liuxu: 'mapGetters'
})
// 或者
computed: mapGetter({liuxu: 'mapGetters'})

点击GitHub地址查看完整代码