Vuex - 3、计算属性 getters

相当于组件里面的计算属性computed，就是对数据仓库（状态）通过类似computed包装，提供给外部组件直接使用，就不用在各个组件里面用computed包裹了。

直接使用

src/store/index.js

组件内使用

引用其他 getters

第二个参数可以直接使用其他getters属性

外部传参数（重要）

正常来说一个getters是返回一个值，不能接受参数。

但是如果你返回的是一个函数，那么就可以给这个函数传参数，相当于不同的地方还可以做到差异化，增加代码复用

外部组件内使用

批量引入 mapGetters（重要）

和mapState差不多

Vue2 和 Vue3 选项API

Vue3 组合API

和上面mapState差不多，只是一个是mapState，一个是mapGetters。

同样可以封装成hook函数，直接给组件调用。

封装

外部组件使用

因为基本上差不多，所以还可以再做一层封装，把一样的代码进行复用，外部使用还是上图那样使用

hook/useMapper.js

import { computed } from 'vue'
import { mapState, useStore } from 'vuex'
export function useMapper(mapper, mapFn) {
  // 拿到store独享
  const store = useStore()
  // 获取到对应的对象的functions: {name: function, age: function}
  const storeStateFns = mapFn(mapper)
  // 对数据进行转换
  const storeState = {}
  Object.keys(storeStateFns).forEach(fnKey => {
    const fn = storeStateFns[fnKey].bind({$store: store})
    storeState[fnKey] = computed(fn)
  })
  return storeState
}

hook/useState.js

import { mapState } from 'vuex'
import { useMapper } from './useMapper'
export function useState(mapper) {
  return useMapper(mapper, mapState)
}

hook/useGetters.js

import { mapGetters } from 'vuex'
import { useMapper } from './useMapper'
export function useGetters(mapper) {
  return useMapper(mapper, mapGetters)
}

hook 函数总出口

给这些hook一个总出口js文件，最终在外部文件内引入总出口即可

import { useState,useGetters } from '@/hooks/index.js' // 你自己项目路径