vue中vuex的使用（2）----getters使用方法

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

bhots

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

阅读量1k

点赞数 1

分类专栏： vue 文章标签： Vue.js Vuex getters 数据处理状态管理

本文链接：https://blog.csdn.net/weixin_45180205/article/details/120242491

版权

vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在Vue.js的Vuex状态管理库中如何使用getters来处理和转换存储在store中的数据。通过getters，可以在不影响原始数据的情况下，对数据进行加工，如乘以10。然后在组件中，可以通过$store.getters访问处理后的数据，例如显示乘以10后的sum值。这种方法使得数据处理更加模块化，提高了代码的可读性和复用性。

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

有时候我们在vuex里面放置的数据，需要经过一系列的转换才拿出来，比如说*10后拿出来，这时候需要用到getters，这个方法可以将共享数据经过特定处理后再给外界取出使用
主要步骤如下
1.设立getters对数据加工
打开vuex的配置文件，加入

//getters---用于将states里面的数据进行加工
const getters = {
    bigSum(state){
        // console.log(state)
        return state.sum*10
    }
}

并在store对象里面引入

const store =new Vuex.Store({
    actions,
    mutations,
    state,
    getters,//记得设置后配置进来
})

2.外部引入getters加工后的数据
直接调用在$store.getters的数据

 <h3>getters如何读取演示：{{$store.getters.bigSum}}</h3>

效果如下
演示数据*10后显示在页面
在这里插入图片描述