Vuex - Getter

Posted 2020-11-23 yuxi2018

Getter 依赖 state 计算后的数据状态

getter 是从 store 中的 state 中派生出的一些状态, getter 的返回值会根据依赖被缓存起来, 且只有依赖发生改变才会被重新计算.

定义 getters

const store = new Vue.Store({
    state: {
        count: 10
    },
    getters: {
        // 默认 state 作为第一个参数
        doneTodos: state => {
            return "$" + state.count;
        },
        // 也可以接受其他的 getter 作为第二个参数
        todo: (state, getters) => {
            return getter.doneTodos; // $10
        },
        // 通过返回一个函数, 来实现 getter 传参
        getTodo: (state) => {
            return (id) => {
                return state.todos.find(item => item.id === id);
            }
        }
    }
});

访问 Vuex 中的 getter 数据

// 1. 通过属性的方式访问
this.$store.getters.doneTodos; // $10

// 2. 通过方法访问, 每次都会进行调用，不会缓存结果
this.$store.getters.getTodo(2); // 实现了传参

mapGetter 辅助函数

辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex'

export default {
    computed: {
        // 使用对象扩展运算符将 getter 混入computed 对象中
        ...mapGetters([
            "doneTodos",
            "todo"
        ]),
        // 以对象的形式, 可以取别的名称
        ...mapGetters({
            // 把 this.todoGetter 映射为 this.$store.getters.todo
            "todoGetter": "todo"
        })
    }
}