vuex通过mapState精准拿到state中某个对象的某个字段

我们都知道 写在vuex中的公共数据
可以通过

import {
    
     mapState } from 'vuex'
export default {
    
    
     computed:{
    
    
	    ...mapState(['dom'])
	  }
}

这种方式快速的定义在 当前组件的计算属性中
但如果 我们存的是个对象 我们只想要其中的一个字段 那么这么写就显得很麻烦了

例如
我们在vuex的state定义了一个user对象 其中有两个字段 分别是 token和userInfo
那么 我们按之前的写可以这样

import {
    
     mapState } from 'vuex'
export default {
    
    
     computed:{
    
    
	    ...mapState(['user'])
	  }
}

这样 我们在组件中 直接 this.user 就能拿到对象
那么 如果我们只需要 user下的userInfo呢?
有些人可能就想 我拿到user 然后再去点userInfo不就行了吗?
是可以 但我们有更好的解决方案
那就是

import {
    
     mapState } from 'vuex'

export default {
    
    
  ...mapState({
    
    
    userInfo: state => state.user.userInfo
  }),
}

这样 我们定义了一个计算属性 userInfo 他的值来源于 state下的user下的userInfo
这样我们代码也会有更好的可读性

猜你喜欢

转载自blog.csdn.net/weixin_45966674/article/details/132610181
今日推荐