【Vue】mapState的hooks封装（Vue3）

偏向明知山

已于 2022-12-15 10:44:11 修改

阅读量777

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3 园游会文章标签： vue.js javascript 前端

于 2022-12-14 16:09:47 首次发布

本文链接：https://blog.youkuaiyun.com/wzyleix97/article/details/128317938

Vue3 园游会专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在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>