Vuex学习笔记（四）——getters

痛定思痛。 2021-08-14 01:43 458阅读 0赞

Vuex中的getter，可以认为是store的计算属性。就跟计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的以来至发生了改变才会被重新计算。

我们来看一个例子：

// 先创建一个store
    const store = new Vuex.Store({ 
        state: { 
            todos: [
                {  id: 1, text: '...', done: true },
                {  id: 2, text: '...', done: false },
                {  id: 3, text: '...', done: true },
                {  id: 4, text: '...', done: true },
                {  id: 5, text: '...', done: true },
                {  id: 6, text: '...', done: false }
            ]
        },
        mutations: { 
            increment (state) { 
                state.count++
            }
        },
        /* vuex允许我们在store中定义getter，这个可以认为是store的计算属性。 getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 Getter接受state作为其第一个参数 filter返回符合条件的新数组 */
        getters: { 
            doneTodos: state => { 
                return state.todos.filter(todo => todo.done)
            },
            // Getter也可以接受其他getter作为第二个参数
            doneTodoCounts: (state, getters) => { 
                return getters.doneTodos.length
            },
            // 也可以返回一个函数，来实现给getter传参。在对store里的数组查询时非常有用。
            getTodoById: (state) => (id) => { 
                return state.todos.find(todo => todo.id === id);
            }
        }
    })
    
    // 创建一个Vue实例
    const vm = new Vue({ 
        el: "#app",
        store,
        template: ` <div> <div>{ { doneTodoCount }}</div> <p v-for="(item, index) of doneTodoGetter" :key="index">{ {item.id}}</p> <p>{ { getTodo }}</p> </div> `,
        computed: { 
            // 如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它无论哪种方式都不是很理想。
            doneTodoCount() { 
                // 获取集合中key值为done的长度
                // return this.$store.state.todos.filter(todo => todo.done).length
                return this.$store.getters.doneTodoCounts
            },
    
            // getter会暴露为store.getters对象，你可以以属性的形式访问这些值：
            // store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
            doneTodoGetter() { 
                return this.$store.getters.doneTodos
            },
            getTodo() { 
                return this.$store.getters.getTodoById(2)
            }
        },
    })

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210813/4ccef3c9ef564361a85a668f11823627.png