Vuex的核心概念之getter

zhangyouxiu66

于 2021-09-09 22:14:16 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/xiaozhang9/article/details/120211232

Vue 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中利用Vuex的Getter来获取和处理Store中的数据。通过创建Getter方法，可以生成一个新的数据属性`showNum`，显示最新的count值。这个Getter不会改变原始Store数据，当Store数据变化时，Getter返回的内容也会自动更新。在Addition.vue组件中，可以通过模板插值或计算属性来使用这个Getter。

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

Getter用于对Store中的数据进行加工处理形成新的数据它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化打开store.js文件，添加getters，如下：

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

然后打开Addition.vue中，添加插值表达式使用getters

或者也可以在Addition.vue中，导入mapGetters，并将之映射为计算属性 import { mapGetters } from 'vuex' computed:{ ...mapGetters(['showNum']) }