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

30 篇文章 0 订阅
8 篇文章 0 订阅

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

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值