Vuex的mapState_computed(() => $store.state.ismapshow)-优快云博客

本文链接：https://blog.youkuaiyun.com/KongYue1202/article/details/108266116

本文详细介绍如何在Vue项目中利用Vuex的状态管理工具简化代码。通过state、computed及mapState辅助函数，实现数据的高效管理和调用。mapState与…mapStates的应用，避免了大量重复代码，提升了开发效率。

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

1.state

store.js

  state: {
    // 自定义共享状态
    istabbarshow: true,
  },

在某个页面调用的时候可以直接调用即

{{ this.$store.state.istabbarshow}}

但是要是想要数据很多的话这样就比较麻烦了
使用computed 计算属性

  computed: {
    isshow () {
      return this.$store.state.istabbarshow
    }
  }

 {{isshow}}调用

但是这样看起来比较麻烦。所以又了mapState这个属性

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

在使用mapState之前,要导入这个辅助函数.

import { mapState } from 'vuex'

使用

computed: mapState(['isshow'])

但是。我还想要其他的计算属性
这种方法就不行了
所以，有了一个…mapStates 对象展开符

  // …mapStates 用对象展开符,不妨碍自己用自定义计算属性
  computed: {
    ...mapState(['isshow']),
    a () {
      return '111'
    }
  }