Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks

2022-03-19 15:07:02

Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks

// useMapper.js 核心import{ computed}from'vue';import{ useStore}from'vuex'// mapper传入的, mapFn是使用的map方法exportfunctionuseMapper(mapper, mapFn){// 拿到store对象const store=useStore()// 获取到对应的对象的function {counter: function, name: function, age: function}const storeDataFns=mapFn(mapper)// 这些对应的是一个个对象, 函数// 对数据进行转换 {counter: ref, name: ref, age: ref}const storeData={}// 使用Object.keys获取storeGettersFns的key值// 在使用forEach遍历每一个key
  Object.keys(storeDataFns).forEach(fnKey=>{// 取出storeDataFns中的函数,调用函数的bind绑定一个this,fn就有了this,// 这个this必须是个对象,且需要有$store属性,且需要个值const fn= storeDataFns[fnKey].bind({$store: store});// 取出的函数用computed包裹,根据key重新赋值给storeGetters
    storeData[fnKey]=computed(fn);})return storeData}

mapState的使用

// 在setup中使用mapState的hooksimport{ mapState, createNamespacedHelpers}from'vuex'import{ useMapper}from'./useMapper'// 传入一个模块名exportfunctionuseState(moduleName, mapper){let mapperFn= mapState// 判断传入的模块名是否是String类型,且长度不为0if(typeof moduleName==='string'&& moduleName.length>0){
    mapperFn=createNamespacedHelpers(moduleName).mapState}else{
    mapper= moduleName}returnuseMapper(mapper, mapperFn)}

mapGetters的使用

// 在setup中使用mapGetters的hooksimport{ mapGetters, createNamespacedHelpers}from'vuex'import{ useMapper}from'./useMapper'exportfunctionuseGetters(moduleName, mapper){let mapperFn= mapGettersif(typeof moduleName==='string'&& moduleName.length>0){
    mapperFn=createNamespacedHelpers(moduleName).mapGetters}else{
    mapper= moduleName}returnuseMapper(mapper, mapperFn)}

应用

<template><div><h2>{{homeCounter}}</h2><h2>{{doubleHomeCounter}}</h2><hr><!-- 没加namespaced:true,的写法--><!--<h2>{{$store.getters.doubleHomeCounter}}</h2>--><!-- 加了namespaced:true,后的写法--><h2>{{$store.getters["home/doubleHomeCounter"]}}</h2></div></template><script>// 写法三import{ createNamespacedHelpers}from'vuex'const{ mapState, mapGetters}=createNamespacedHelpers("home")import{ useState, useGetters}from'../hooks/index'exportdefault{setup(){const state=useState("home",["homeCounter"])const getters=useGetters("home",["doubleHomeCounter"])return{...state,...getters}}}</script><style scoped></style>
  • 作者:小刘同学_lsy
  • 原文链接:https://blog.csdn.net/weixin_46926182/article/details/120820268
    更新时间:2022-03-19 15:07:02