【Vue】mapState的hooks封装(Vue3)

本文介绍如何在Vue3中使用自定义Hooks封装mapState,实现从Vuex中批量获取状态值。通过实例展示了传入数组和对象两种方式的使用方法,并与Vue2进行了对比。

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

vue2中,可以在计算属性中,直接使用mapState从vuex中取出多个状态值,Vue3提供了useStore进行取值,但需要分别取值,为了能够同时取值,封装hooks如下

mapGetters的使用和封装

mapState的hooks封装

封装

目录:src/hooks/useState.js

// useState.js
import { useStore, mapState } from "vuex";
import { computed } from "vue";

export default function (mapper) {
  // 拿到store
  const store = useStore();

  // 获取相应的对象 : {name:function,gender:function}
  const storeStateFns = mapState(mapper);

  // 进行 $store 指向 ,并赋值
  const storeState = {};
  Object.keys(storeStateFns).forEach((Fnkey) => {
    // setup中无this指向
    // 在computed中计算state时需要  $store 指向 ,所以使用bind() 绑定 $store
    const fn = storeStateFns[Fnkey].bind({ $store: store });
    storeState[Fnkey] = computed(fn);
  });

  //返回
  return storeState;
}

使用

传入数组

<script setup>
import useState from '@/hooks/useState'
//传入数组
const person = useState(['name', 'gender'])
//返回值是对象
console.log(person.name.value);//yyy
</script>

在这里插入图片描述

传入对象

<script setup>
import useState from '@/hooks/useState'
//传入数组
const person = useState(
{    sName: (state) => state.name,
   sGender: (state) => state.gender
 })
//返回值是对象
console.log(person.name.value);//如下图
</script>

在这里插入图片描述

Vue2的用法

<script>
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState([
            'name',
            'gender'
        ])
    },
};
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值