vuex_Getter_03

Getter

有时候我们需要从 store 中的 state 中派生出一些状态,比如获取姓名的时候要将姓名翻转

<h2>{{msg}}</h2>
<p>{{name}}</p>

computed: mapState({
    name(state) {
        return state.name.split('').reverse().join('')
    }
})

getter01.png

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想

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

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

store/index.js

const state = {
    count: 1,
    sex: '男',
    name: 'qzy',
    age: 18
}
const getters = {
    name: state => state.name.split('').reverse().join('')
}

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

About.vue

<h2>{{msg}}</h2>
<p>{{name}}</p>

computed: {
    name(){
        return this.$store.getters.name
    }
}

显示结果与原来一致

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

Getter 也可以接受其他 getter 作为第二个参数

const getters = {
    name: state => state.name.split('').reverse().join(''),
    userInfo: ((state, getter) => {
        return `用户姓名为${getter.name},年龄为${state.age}`
    })
}

About.vue

<p>{{name}}</p>
<p>{{userInfo}}</p>

computed: {
    name() {
        return this.$store.getters.name
    },
    userInfo() {
        return this.$store.getters.userInfo
    }
}

getter02.png

这样我们可以很容易地在任何组件中使用它。

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的

通过方法访问

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用

const state = {
    // ...
    arr: [{
        id: 1,
        text: 1
    }, {
        id: 2,
        text: 2
    }]
}

const getters = {
    // ...
    getArrById: ((state) => {
        return(id) => {
            return state.arr.find(item => item.id === id)
        }
    })
}

<p>{{getArrById(1)}}</p>

computed: {
    // ...
    getArrById() {
        return this.$store.getters.getArrById
    }
}

getter03.png

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果

mapGetters 辅助函数

作用与使用方法基本与mapState保持一致

import {mapGetters} from 'vuex'

computed: {
    ...mapGetters(['name','userInfo','getArrById'])
}