vue3在setup中使用mapState解读

目录
  • vue3 setup使用mapState
    • 创建一个hook
  • vue3 setup语法糖中使用mapState
    • 在setup函数中使用
    • 在setup语法糖中使用
  • 总结

vue3 setup使用mapState

mapState和computed结合在Vue3版本中使用，广大网友写了很多，这里只做一个实战后的应用笔记，不多赘述

创建一个hook

hooks/useMapState.ts

import { computed } from "vue"
import { mapState, useStore } from "vuex"
export default function (state:any) {
    // 1. 获取实例 $store
    const store = useStore()
    // 2. 遍历状态数据
    const storeStateFns = mapState(state)
    // 3. 存放处理好的数据对象
    const storeState = {}
    // 4. 对每个函数进行computed
    Object.keys(storeStateFns).forEach(fnKey => {
        const fn = storeStateFns[fnKey].bind({ $store: store })
        // 遍历生成这种数据结构 => {name: ref(), age: ref()}
        storeState[fnKey] = computed(fn)
    })
    return storeState
}

使用

<script lang="ts" setup>

import useMapState from "@/hooks/useMapState"

const myState:any = useMapState({
  includeList: (state: any) => state.keepAlive.includeList
})
const { includeList } = myState
</script>

vue3 setup语法糖中使用mapState

在Vue的组件中，要想使用Vuex中的多个State，我们经过会借助mapState辅助函数进行获取值，但是在Vue3中，通过computed的来获取多个值的方法官方并未提供，话不多说，直接上代码。

useMapState.js

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

export const useMapState = (getKeys) => {

    const store = useStore();
    
    const storeState = {}
    const storeFns = mapState(getKeys)

    Object.keys(storeFns).forEach((fnKeys) => {
        const fn = storeFns[fnKeys].bind({$store: store})
        storeState[fnKeys] = computed(fn)
    })

    return storeState
}

在setup函数中使用

<script>
import { useMapState } from ''./Hooks/useMapState.js'

export default {
    setup() {
        const storeState = useMapState(['title', 'counter'])

        return {
            ...storeState
        }
    }
}

</script>

在setup语法糖中由于不能使用 return进行返回，所以只能按照如下方式写了

在setup语法糖中使用

<script setup>
import { useMapState } from ''./Hooks/useMapState.js'

const { title, counter } = useMapState(['title', 'counter'])

</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    目录 一.背景 二.vue3语法的使用 2.1. 父子通信props 2.2. EventBus 2.3. 计算属性computed 2.4. pinia状态管理器的使用 2.4.1. 模块化 2.4.2. 使用方法 2.5. watch监听器 2.6. 全局函数/变量注册 三.总结 一.背景 最近工作了比较忙,比较少写文章:最近做的开源项目,由于vue-cli和vuex要逐渐不维护了,因此需要对技术栈进行升级:目前所使用的最新技术栈是:vue3 + vite + element-plus +

  • vue3中＜script setup＞ 和 setup函数的区别对比

    目录 一.基本语法 setup函数的写法 在<script setup>语法糖的写法 二.使用外部文件区别 setup函数 <script setup>语法糖 三.注册组件 setup函数 <script setup>语法糖 四.使用自定义指令 setup函数 <script setup>语法糖 五.父传子数据通信 setup函数 <script setup>语法糖 六.子传父数据通信 setup函数 <script setup>语法

  • Vue3的setup在el-tab中动态加载组件的方法

    公司某项目需求在页面显示的组件是根据角色变化而变化的,在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件,如下图所示 <template> <component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/> </template> 数据内容大概是这样的 在未使用setup语法糖时候我要引

  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    目录 Vue3中name有什么用呢? Vue3 定义 name 1.自动生成 2.在开启一个script用来定义name 3.使用第三方插件 unplugin-vue-define-options 4.个人想法 我想着直接在script 定义name 不好吗? Vue3 setup 支持 name 插件实现 思路借鉴上面插件 总结 Vue3中name有什么用呢? 1.在递归组件的时候需要定义name 2.配合keep-alive include exclude 可以缓存组件 3.在Vue有报错或

  • vue3中setup语法糖下通用的分页插件实例详解

    vue3中setup语法糖下通用的分页插件实例详解

    目录 vue3中setup语法糖下父子组件之间的通信 准备工作 父传子: 子传父: 先给大家介绍下vue3中setup语法糖下通用的分页插件,内容如下所示: 效果 自定义分页插件:PagePlugin.vue <script setup lang="ts"> // total :用来传递数据总条数 // pageSize :每页展示几条数据 // currentPage :当前默认页码 // change-page :页码改变时触发的事件,参数为当前页码 const pro

  • Vue3中的setup语法糖、computed函数、watch函数详解

    目录 写在前面 setup 语法糖 computed函数 watch 函数 写在最后 写在前面 专栏介绍:凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其他框架的巨大优势,有兴趣的伙伴可以看一下Vue与React的区别和优势对比,随着 Vue 框架不断的被认可,现如今的 Vu

  • Vue3 setup的注意点及watch监视属性的六种情况分析

    目录 一,setup须知 1.1setup的执行时间 1.2.steup参数 二,watch监视属性 一,setup须知 1.1setup的执行时间 1.setup的执行时间要比beforCreate执行要早 export default { name: "Demo", beforeCreate(){ console.log('beforeCreate已执行'); }, setup() { console.log('setup已执行'); let person = reactive({

  • Vue3在Setup中使用axios请求获取的值方式

    目录 Setup中使用axios请求获取的值 Vue3+Setup使用知识点 Setup中使用axios请求获取的值 上次我们使用axios给项目搞上了网络请求,从此项目数据不再是静态的.对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式,写此日记记录踩坑过程. axios返回的项目数据无法通过函数返回值返回,如何获取返回值呢? <script> import { defineComponent, reactive, onMounted, toRefs, ref } from &q

  • 使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    目录 前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做

  • vue3组合API中setup、 ref、reactive的使用大全

    vue3组合API中setup、 ref、reactive的使用大全

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变量的变化哈!我们将会利用它 ref 在vue中内置,需要导入. <template> <div>{{ countNum}}</div> <button @click="handerFunc">按钮</button> </te

  • 简单聊聊vue3.0 sfc中setup的变化

    目录 前言 标准的sfc写法 script-setup 变量暴露 组件挂载 props 自定义事件 总结 前言 在vue中,sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式,它允许将 Vue 组件中的模板.逻辑 与 样式封装在单个文件中. 以下是一个基本的sfc <script> export default {   data() {     return {       greeting: 'Hello World!'     }   } } </script> &l

  • vue3.0中setup中异步转同步的实现

    vue3.0中setup中异步转同步的实现

    目录 vue3 setup中异步转同步 vue3中setup前加上async后页面不显示 子组件 父组件中需要单独设置 使用vue3中的异步 vue3 setup中异步转同步 vue3中setup前加上async后页面不显示 **问题描述 **在开发 vue3 中,因为通过接口数据为异步函数获取,导致最后数据无法成功赋值进 return 中的数据.所以需要setup函数异步转同步,后设置了async 后异步转同步,结果导致页面空白不显示. 解决问题 在Vue3中,如果当前组件的setup使用了a

  • vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    目录 在setup()钩子函数中调用 在<srcipt setup>中调用 在setup()钩子函数中调用 父组件 <template> <div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div> </template> <scrip

  • 详解Vue3 Composition API中的提取和重用逻辑

    Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    浅谈vue2的$refs在vue3组合式API中的替代方法

    如果你有过vue2的项目开发经验,那么对$refs就很熟悉了.由于vue3的断崖式的升级,在vue3中如何使用$refs呢?想必有遇到过类似的问题,我也有一样的疑惑.通过搜索引擎和github,基本掌握如何使用$refs.在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用. 最近业余在学习vue3项目<蜡笔(Crayon)管理模板:Vue3 + Vuex4 + Ant Design2>开发,这两天迭代推进了一点,实现了chart图表组件,写文章的时候发现提交代码的co

  • 浅谈vue3在项目中的逻辑抽离和字段显示

    目录 逻辑分层 将各个区域业务分开 这样做的优势 这样的场景应该如何处理 优化 reactive 不一定非要写在setup函数中 如何在页面上直接显示值 逻辑分层 我们在使用vue3开发项目的时候, 如何进行[区域分层]呢???? 举一个简单的小粒子 一个区域有[查询逻辑.修改后的保存逻辑.新增逻辑.删除逻辑] 这个页面可能还有其他的区域.A区域.B区域,C区域...[有很多逻辑] 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup ()

随机推荐