vuexGetters总结

最新推荐文章于 2025-03-18 22:56:40 发布

BL_gui

最新推荐文章于 2025-03-18 22:56:40 发布

阅读量220

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/BL_gui/article/details/103989888

版权

本文深入探讨了Vuex中Getters的使用方法及其在状态管理中的角色，包括如何定义Getters计算属性，以及在Vue组件中通过不同方式调用它们。Getters允许开发者基于现有状态派生新的状态，提升应用程序的可读性和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结

getters

写法

getters方法是和state同一级别的方法
getters相当于一个计算属性

const store = new Vuex.Store({
    state:{
        user:{
            name: '',
            tel: '',
            id: '',
            sex: ''
        }
    },
    getters:{
        // 写getters的计算属性（函数）
        getUserId(state) {
            return state.user.id
        }
    }
})

在vue文件中使用
第一种写法

<template>
    <div>{{$store.getters.getUserId}}</div>
</template>

    created() {
        console.log(this.$store.getters.getUserId)
    }

第二种写法

<template>
    <div>{{getUserId}}</div>
</template>

    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {

            }
        },
        computed: {
            ...mapGetters([
                'getUserId'
            ])
        },
        created() {
            console.log(this.$store.getters.getUserId)
        }
    }