论如何在vue3中正确的使用vuex的辅助函数

·  阅读 6755
论如何在vue3中正确的使用vuex的辅助函数

前言

在实际开发中,我们经常会用到 vuex 来对数据进行管理,随着数据越来越多,我们逐渐开始使用一些语法糖来帮助我们快速开发。 即 vuex 中的 mapState、mapGetters、mapMutations、mapActions 等辅助函数是我们经常使用到的。

辅助函数的使用

在vue2中我们可以通过 options API 在 computed 中来使用 mapState,

computed: mapsState(['name','age'])
复制代码

在 vue3 中主要是使用 setup 来进行操作时,一般来使用vuex中数据是这样操作的,通过 useStore 这个钩子来得到

import { useStore } from 'vuex'
import { computed } from 'vue'

setup() {
  const store = useStore()
  const name = computed(() => store.state.name)
  const age = computed(() => store.state.age)
  return {
    name, age
  }
},
复制代码

这样的不足是如果数据多了,那么写起来就尤为麻烦,所以我们想到了辅助函数 mapState 来解决。 但是呢,vuex 官方并没有例子来说明如何在setup中去使用辅助函数 mapState。 所以我就尝试着以vue2的形式来写:

setup() {
  const stateStore = mapState(['name', 'age'])
  return {
    ...stateStore
  }
},
复制代码

但显示到浏览器的结果却发现是这样子的:

mapState.png

为什么会返回出函数呢?

为什么在setup中使用mapState会返回函数?

我试着去看了一下 mapState 的源码,发现是通过 this.$store 来拿到 store 的值的

然而在 setup 中是取不到 this

mapState源码.png

其他的辅助函数(mapGetters、mapMutations、mapActions) 同样都是这样类似的处理的。 所以通过上面的源码,我们知道:辅助函数就是会返回一个对象,而 key 是字符串, val就是函数, 类似于:

computed:{
    ...mapState(['name','age'])
}
// 转换为了:
{ 
    name: function(){},
    age:function(){}
}
复制代码

所以就明白了为什么在上述的代码中为什么会返回一个函数了。

封装一个 useState 函数

明白了其原理后,我们就知道了在 computed 中可以使用mapState, 是因为 computed 本身就是一个函数,它会接收一个函数作为参数。 我们也知道了辅助函数是 被解析成了一个对象,对象中的属性值是函数。

那么我们是不是可以试着把这俩个结合起来去封装一个hooks来使用了?

import { useStore, mapState } from 'vuex'
import { computed } from 'vue'

const useState = function(mapper) {
    // mapper: Array | Object
    const store = useStore()
    
    //使用辅助函数解析成一个对象
    const storeStateFns = mapState(mapper)
    const storeState = {}
    
    //通过Object.keys拿到对象的所有key值,遍历,取出对应的value值,也就是函数
    Object.keys(storeStateFns).forEach(item => {
        // 这我们知道辅助函数的内部是通过this.$store来实现的
        // setup中没有this, 所以通过bind来改变this的指向
        const fn = storeStateFns[item].bind({ $store: store })
        //拿到函数,作为计算属性的参数,最后在留在一个对象中
        storeState[item] = computed(fn)
    })
    
    // storeState是一个对象, key是字符串, value值是ref对象
    return storeState
}

export default useState
复制代码

然后在组件中就这样使用:

setup(){
    const stateStore = useState(['name','age']) // 使用对象的形式也行
    return {
        ...stateStore
    }
}
复制代码

这样就可以在setup中使用辅助函数啦,又可以少些代码了多开心哈~

封装一个 useMapper 函数

同样的, 不止是 mapState, mapGetters 也是根据相同的思路来进行封装的,所以就稍加改造。如下:

// hooks/useMapper.js

import { computed } from 'vue'
import { mapGetters, mapState, useStore } from 'vuex'

const useMapper = (mapper, mapFn) => {
  const store = useStore()

  const storeStateFns = mapFn(mapper)
  const storeState = {}
  Object.keys(storeStateFns).forEach((keyFn) => {
    const fn = storeStateFns[keyFn].bind({ $store: store })
    storeState[keyFn] = computed(fn)
  })

  return storeState
}

export const useState = ( mapper) => {
  return useMapper(mapper, mapState)
}

export const useGetters = (mapper) => {
  return useMapper(mapper, mapGetters)
}
复制代码

然后就这样的使用:

示例.png

关于 mapMutations、mapActions 是不用进行封装的,原因可以自己想想

其实哈,使用mutaiton和actions中本来就是去调用方法的,所以直接就是跟辅助函数的属性值挂钩。

模块化情况下的考虑

刚刚封装的 useMapper 是没有考虑到模块化的, 在开发时,随着数据的种类越来越多,使用 modules 是不可避免的,所以我们需要对刚刚的 useMapper 进行一下 模块化边缘的处理

如下: 我们需要借助vuex提供的createNamespacedHelpers函数来得到模块中的属性

import { computed } from 'vue'
import { mapGetters, mapState, useStore, createNamespacedHelpers } from 'vuex'

const useMapper = (mapper, mapFn) => {
  const store = useStore()

  const storeStateFns = mapFn(mapper)
  const storeState = {}
  Object.keys(storeStateFns).forEach((keyFn) => {
    const fn = storeStateFns[keyFn].bind({ $store: store })
    storeState[keyFn] = computed(fn)
  })

  return storeState
}

export const useState = (moduleName, mapper) => {
  let mapperFn = mapState
  if (typeof moduleName === 'string' && moduleName.length > 0) {
    mapperFn = createNamespacedHelpers(moduleName).mapState
  } else {
    mapper = moduleName
  }
  return useMapper(mapper, mapperFn)
}

export const useGetters = (moduleName, mapper) => {
  let mapperFn = mapGetters
  if (typeof moduleName === 'string' && moduleName.length > 0) {
    mapperFn = createNamespacedHelpers(moduleName).mapGetters
  } else {
    mapper = moduleName
  }
  return useMapper(mapper, mapperFn)
}
复制代码

使用:

setup() {
  const storeState = useState(['name', 'age', 'six'])
  const storeGetters = useGetters(['counter'])
  const homeState = useState('home', ['homeCounter'])
  return {
    ...storeState,
    ...storeGetters,
    ...homeState
  }
},
复制代码

总结

在vue2中习惯了使用辅助函数,但是在vuex文档中没有找到在vue3内如何使用辅助函数,然后一直去使用 computed 来去包裹 store 来获取值,随着数据的增多,使用起来也很麻烦,所以就封装了这样一个函数来提高开发效率。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改