Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks
Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks// useMapper.js 核心import { computed } from 'vue';import { useStore } from 'vuex'// mapper传入的, mapFn是使用的map方法export function useMapper(mapper, mapFn) {// 拿
·
Vue3setup函数中使用Vuex中使用mapState和mapGetters的hooks
// useMapper.js 核心
import { computed } from 'vue';
import { useStore } from 'vuex'
// mapper传入的, mapFn是使用的map方法
export function useMapper(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的hooks
import { mapState, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
// 传入一个模块名
export function useState(moduleName, mapper) {
let mapperFn = mapState
// 判断传入的模块名是否是String类型,且长度不为0
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapState
} else {
mapper = moduleName
}
return useMapper(mapper, mapperFn)
}
mapGetters的使用
// 在setup中使用mapGetters的hooks
import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
export function useGetters(moduleName, mapper) {
let mapperFn = mapGetters
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapGetters
} else {
mapper = moduleName
}
return useMapper(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'
export default {
setup() {
const state = useState("home", ["homeCounter"])
const getters = useGetters("home", ["doubleHomeCounter"])
return {
...state,
...getters
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)