在setup中使用mapGetters

最新推荐文章于 2023-06-12 16:37:56 发布

他在时间门外

最新推荐文章于 2023-06-12 16:37:56 发布

阅读量694

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/H_jrqn/article/details/125502291

版权

这篇博客介绍了如何在Vue.js应用中利用Vuex的mapGetters和useStore来创建并使用getter方法。通过`useGetters.js`文件，开发者可以便捷地将Vuex store中的getter映射为计算属性，然后在组件的setup函数中引入并返回，实现数据的获取和展示。

摘要由CSDN通过智能技术生成

首先在hoos下生成一个useGetters.js文件

import { computed } from "vue";
import { mapGetters, useStore } from "vuex";


export function useGetters(mapper) {
    // 拿到store对象
    const store = useStore()

    // 获取到对应的对象的functions:{name:function,age:function}
    const storeStateFns = mapGetters(mapper)

    // 对数据进行转换
    const storeState = {}
    Object.keys(storeStateFns).forEach(fnkey => {
        const fn = storeStateFns[fnkey].bind({ $store: store });
        storeState[fnkey] = computed(fn)
    })

    return storeState
}

组件中使用

先引入：

import { useGetters } from '../hooks/useGetters';

setup中：

 setup(){

            const storeGetters=useGetters(["nameInfo","ageInfo",]);

            return{
                ...storeGetters
            }

       }