vuex之mapState辅助函数使用

vuex 辅助函数

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

mapState的几种写法使用

// 第一种 $store.state
 computed:{
        userInformation(){
            return this.$store.state.userInformation
        },
         userToken(){
            return this.$store.state.userToken
        },
    },
    
// 第二种
  computed:mapState([
       'userInformation',
        'userToken'
    ]),  
    
// 第三种  
  computed:mapState({
        'userInformation':state=>state.userInformation,
        'userToken':state=>state.userToken,
    })

// 第四种  使用展开运算符
  computed:{
        xxx(){
            return 'yyy'
        },
        // 注意:这种写法用mapstate等这种辅助函数的时候,前面的方法名和获取的属性名是一致的
        ...mapState([
            'userInformation',
            'userToken'
        ])
    },

mapGetters的几种写法使用

// 第一种 $store.getters
 computed:{
        xxx(){
            return 'yyy'
        },
        ...mapState([
            'userInformation',
            'userToken'
        ]),
        // 前面的方法名和获取的属性名可以不同
        userInfo(){
           return this.$store.getters.userInfo
        },
        userTk(){
           return this.$store.getters.userTk
        },
    },
    
// 第二种
 computed:{
        xxx(){
            return 'yyy'
        },
        ...mapState([
            'userInformation',
            'userToken'
        ]),
        // 注意:这种写法用mapGetters等这种辅助函数的时候,前面的方法名和获取的属性名是一致的
        ...mapGetters([
            'userInfo',
            'userTk'
        ])
    },


// 第三种
 computed:{
        xxx(){
            return 'yyy'
        },
        ...mapState([
            'userInformation',
            'userToken'
        ]),
        // userInfo 是一个重新定义的别名,'userInfo'不是字符串,而是对应的getter里面的方法名
        ...mapGetters({
            'userInfo':'userInfo',
            'userTk':'userTk'
        })
    },

mapMutations的几种写法使用

methods:{
  	...mapMutations([
       'userInformation',
       'userToken'
 	]),
 	xxx(){
 	 // 将 this.userInformation('fqniu') 映射为 this.$store.commit('userInformation','fqniu')
	 this.userInformation('fqniu')
     this.userToken('80859-abcc-403-81a9-c7d5341fqniu')
	}
}

// 第二种写法
methods:{
  ...mapMutations({
       // userInfo 是一个重新定义的别名,本组件可以直接调用这个方法名字使用
       'userInfo':'userInformation',
       'userTk':'userToken'
   }),
   xxx(){
 	 // 将 this.userInfo('fqniu') 映射为 this.$store.commit('userInformation','fqniu')
	 this.userInfo('fqniu')
     this.userTk('80859-abcc-403-81a9-c7d541fqniu')
	}
}

mapActions的几种写法使用

// 第一种 $store.actions
created(){
	this.$store.dispath('userInfo','fqniu')
	this.$store.dispath('userTk','80859-abcc-403-81a9-c7d5341fqniu')
},

// 第二种
methods:{
        // 注意:这种写法用mapActions等这种辅助函数的时候,前面的方法名和获取的属性名是一致的
        ...mapActions([
            'userInfo',
            'userTk'
        ])
  },


// 第三种
methods:{
        // userInfo 是一个重新定义的别名,挂载到this(vue)实例上,'userInfo'是actions里面的函数名称
        ...mapActions({
            'userInfo':'userInfo',
            'userTk':'userTk'
        })
 },

vuex中写法

import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        userNameFirst:'fq',
        userNameLast:'niu',
    },
    mutations: {
        // 用户信息
        userInformation(state,userInfo){
            state.userInformation = userInfo
        },
        // 用户token所有数据
        userToken(state,userToken){
            state.userToken = userToken
        },

    },
    getters:{
        userInfo(state){
            return state.userNameFirst +'fqniu'
        },
        userTk(state){
            return state.userNameLast+'202102122141'
        }
    },
    actions: {
        //设置token
       
    },
    modules: {
        // user,
    }
})

在这里插入图片描述

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
`mapState` 是 Vuex 中的一个辅助函数,它可以将 store 中的 state 映射到组件的 computed 计算属性中,方便组件直接使用。它的作用可以简化组件中获取 state 的代码,使代码更加简洁和易读。 `mapState` 的语法如下: ```javascript import { mapState } from 'vuex' export default { computed: { ...mapState({ // 将 `this.count` 映射为 `this.$store.state.count` count: state => state.count, // 将 `this.count` 映射为 `this.$store.state.count` // 并提供了一个自定义的计算属性名 `countAlias` countAlias: 'count' }) } } ``` `mapState` 接收一个对象作为参数,对象中的每一个属性都是一个函数或者一个字符串,函数用于计算 state 中的值,字符串则是指定 state 中的属性名。这些计算属性将会被混入到组件的 computed 计算属性中。 在组件中使用 `mapState` 返回的计算属性时,可以直接使用计算属性名即可,无需使用 `$store.state` 来获取 state 中的值。 ```javascript <template> <div> <p>count: {{ count }}</p> <p>countAlias: {{ countAlias }}</p> </div> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ count: state => state.count, countAlias: 'count' }) } } </script> ``` 以上代码中,组件中的计算属性 `count` 和 `countAlias` 都是通过 `mapState` 辅助函数Vuexstate 中映射得来的。这样,我们就可以很方便地在组件中使用这些计算属性了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值