Vue3使用mapstate
Vue3使用mapState
·
当我们使用vuex中的store中的state的数据值,要通过$store.state.属性名来拿显得麻烦
下边是coderwhy老师的一种方法
简便方法一:(创建计算属性,一个个的提取)
例如以下的counter,最后return {counter}即可
但是属性一旦多起来代码就会变得冗余
简便方法二:(封装useState的hooks)
1.错误示范
这边解释一下为什么不直接导入mapState之后传入computed(比如以下代码,下边是错误示范)
因为mapState返回的是一个个对象,并且每个对象的键值对中,值都是一个个方法,所以显示的都函数。
2.正确示范
但是我们要达到下边的方法该怎么做
import { computed } from 'vue'
import { mapState, useStore } from 'vuex'
export default function (mapper) { //mapper为传入的数组或者对象
const store = useStore() // 获取state对象
const stateFns = mapState(mapper)
const stateMaps = {}
Object.keys(stateFns).forEach((key) => { //遍历数组或者对象,加入计算属性
// 计算属性接收一个方法,mapState()返回的就是一个键值对,值就是方法
stateMaps[key] = computed(stateFns[key].bind({ $store: store }))
})
return stateMaps
}
但是computed就是接受一个方法,然后返回一个计算属性,这样我们用一个空数组来接收计算属性不久可以了吗,解决。(这边要注意stateFns内部绑定this的问题,需要手动添加一个$store)
3.优化
import { computed } from 'vue'
import { useStore } from 'vuex'
export default function (mapper, func) { //mapper为传入的数组或者对象
const store = useStore() // 获取state对象
const stateFns = func(mapper)
const stateMaps = {}
Object.keys(stateFns).forEach((key) => { //遍历数组或者对象,加入计算属性
// 计算属性接收一个方法,mapState()返回的就是一个键值对,值就是方法
stateMaps[key] = computed(stateFns[key].bind({ $store: store }))
})
return stateMaps
}
import useMapper from './useMapper'
import { mapState } from 'vuex'
export default function (mapper) {
return useMapper(mapper, mapState)
}
这样getters就可以这样写(也就是抽取了公共代码)
那么在mapMutation的喃?
其实直接用就可以了,因为@click接收的就是一个函数,不需要封装
4.模块划分
如果此时module又分了一个模块home,我们该如何使用map喃(mapaction和mapmutation是直接用的),createNamespaceHelper用来确定当前模块(设置为home,这样就直接提交方法即可)。
这时候就要对第一个参数进行模块划分,多加一个判断即可
import useMapper from './useMapper'
import { mapState, createNamespacedHelpers } from 'vuex'
export default function (moduleName, mapper) {
let myMapState = mapState
if (typeof moduleName === "string" && moduleName.length !== 0) {
myMapState = createNamespacedHelpers(moduleName).mapState
} else { //如果moduleName没有传入,则只有一个参数,也就是要传入的数组或者对象
mapper = moduleName
}
return useMapper(mapper, myMapState)
}
之前useMapper代码不变
import { computed } from 'vue'
import { useStore } from 'vuex'
export default function (mapper, func) { //mapper为传入的数组或者对象
const store = useStore() // 获取state对象
const stateFns = func(mapper)
const stateMaps = {}
Object.keys(stateFns).forEach((key) => { //遍历数组或者对象,加入计算属性
// 计算属性接收一个方法,mapState()返回的就是一个键值对,值就是方法
stateMaps[key] = computed(stateFns[key].bind({ $store: store }))
})
return stateMaps
}
更多推荐
已为社区贡献1条内容
所有评论(0)