Vue中使用Vuex获取多个state状态的4种写法

本文详细介绍了在Vue项目中利用Vuex管理状态时,获取多个state的四种不同方式:初级直接访问法、原理级的mapState自定义函数法、中级简化法及高级展开运算符法。

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

Vue中使用Vuex获取多个state状态的4种写法

写法①(初级)

computed: {
    count () {
      return this.$store.state.count
    },
    count1 () {
      return this.$store.state.count1
    }
  }

写法②(原理级)

computed: mapState({
    count: state => state.count,
    count1: state => state.count1,
    
    // 官网
    // countAlias是个变量,并把count的值赋给它
    countAlias: 'count',
    // countPlusLoaclState是个方法,可在里面写计算操作并会返回计算后的值,并且可通过this获取data()局部数据的值
    countPlusLoaclState (state) {
      return state.count + this.num
    }
  })

写法③(中级)

computed: mapState([
    'count',
    'count1'
  ])

写法④(高级)

computed: {
    ...mapState([
      'count',
      'count1'
    ])
  }

Vuex核心概念State

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值