Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks
import{ computed}from'vue';import{ useStore}from'vuex'exportfunctionuseMapper(mapper, mapFn){const store=useStore()const storeDataFns=mapFn(mapper)const storeData={}
Object.keys(storeDataFns).forEach(fnKey=>{const fn= storeDataFns[fnKey].bind({$store: store});
storeData[fnKey]=computed(fn);})return storeData}
mapState的使用
import{ mapState, createNamespacedHelpers}from'vuex'import{ useMapper}from'./useMapper'exportfunctionuseState(moduleName, mapper){let mapperFn= mapStateif(typeof moduleName==='string'&& moduleName.length>0){
mapperFn=createNamespacedHelpers(moduleName).mapState}else{
mapper= moduleName}returnuseMapper(mapper, mapperFn)}
mapGetters的使用
import{ 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>