vuex的辅助函数--映射函数

本文详细介绍了Vuex中用于组件和状态管理的四个辅助函数——mapState、mapActions、mapGetters和mapMutations的使用方法。通过这些函数,开发者可以更方便地在组件内部直接访问和操作Vuex store中的状态,进行数据获取、提交mutation以及调用actions。示例代码展示了如何在组件中导入并使用这些辅助函数,简化了代码并提高了代码的可读性。

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

使用mapState辅助函数

import {mapState} from 'vuex'
export default {
  name: 'home',
  computed: {
      ...mapState('user', ['nickname','age','gender'])	// 可直接使用
  } 
}

mapActions

import { mapActions } from 'vuex'
methods: {
    // ...mapActions('user', ['login']) //为了避免和状态值重名,也可以使用完整路径,如下
    ...mapActions(['user/login'])
}
// 在使用的时候
this['user/login']('admin').then(res => {})

mapGetters

使用方法类似mapState

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters('user', ['welcome'])
}

mapMutations

和mapActions类似

import { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['user/login'])
}

// 在使用的时候
this['user/login']('admin').then(res => {})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值