八、如何vue3.0中vuex使用map辅助函数(2.0)

已于 2022-08-15 15:46:41 修改
阅读量1.9k 收藏 6
点赞数 1
分类专栏： vue3.0的开发和学习 文章标签： vue.js 前端 javascript
于 2022-06-20 11:30:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43185384/article/details/125368402
版权

        我们在做前端vue项目中，如果我们面临全局公共的数据，那么我们肯定会使用到vuex，对于我们来说，我们取全局公共数据， 如果使用vuex里面的写法就会感觉很麻烦，不是那么方便。所以我们会去找一些方便的写法供我们去使用。

        在vue2.0的时候，vue给我推出了map辅助函数来去操作vuex，但是呢，vue3.0却没有没有明确指出使用map辅助函数， 根据我们的尝试，computed属性是一个函数，接受的参数也是一个函数，但是map辅助函数最后被解析成一个对象， 但是对象里面仍然是一个函数，我们如何将其进行连接呢？如下图

 如上图，那么我们是在vue3.0中无法使用map辅助函数的，如果我们想在vue3.0中使用，那么就需要我们来进行封装，封装一个hooks函数供我们来使用。

store的封装(hooks函数)：

        1、在封装hooks中，我们需要知道我们要封装哪些内容进入，mapActions、mapmutations、mapState、mapGetters都需要考虑进入

        2、mapActions和mapMutations其中都是函数，而mapState中是变量、mapGetters中是返回值，在vue中，我们使用vuex的变量和返回值都需要做监听，hooks函数是针对四个map函数所作的操作，那么我们基于变量和返回值也需再一次进行封装。

        3、在ho

了解本专栏 订阅专栏 解锁全文 超级会员免费看
arguments_zd
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
node+mongoDB+vue3.0+vueX+element-ui资金管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
VUE官方文档最新离线文档(2.0和3.0)
11-02
VUE官方文档(2.0和3.0)，不需要安装任何HTTP_SERVER，WINDOWS/LINUX下都可以使用，不好用或者资源是假的，留言骂我，不要客气。
vue3 实现 Map 地图区域组件封装
weixin_50450473的博客
07-17 1880
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~其中通过后台返回的数据结构，name 名称必须与下载的 json 文件的name名相等，否则会导致 单击的 data数据为空或显示不出来。坑：地图echarts版本必须在5.0.0以下，否则不能显示，此处指定安装 echarts@4.9.0 即可。将下载的 json 放至assets下的 img文件夹 中。
vue3-vueX辅助函数
最新发布
2301_80137575的博客
02-23 351
mapMutations,mapActions:必须放在methods中。mapMutations,mapActions：调用前加this。mapState,mapGetters:必须放在计算属性中。注意事项：只能在vue2版本中使用（选项式API)mapState,mapGetters：直接使用。
vue3+ts 使用 vuex辅助函数(mapState,mapMutations,mapGetters,mapActions) 对函数进行二次封装
HHH917的博客
03-09 6743
本文辅助函数封装是参考 深入Vue3+TypeScript技术栈-coderwhy大神新课 视频学习改的 vue2中的使用方式 ...mapState(["abc", "name"]) ...mapState({ name: state => state.name, }) ...mapGetters(["allName"]) ...mapGetters({ allAge: "main/allAge", }) ...mapMu
vue3中使用Vuex
九仞山的专栏
06-11 6210
详细介绍了vue3中使用Vuex的相关特性和方法,，包括State，Getter，Mutations，Action，Module和一些辅助函数的使用方法和技巧
VUE2,VUE3中Vuex的使用详解
ICanWin_lll的博客
08-16 1633
文章目录 一、Vuex是什么 二、State 数据源 2.1 通过 this.$store.state.全局数据名称 访问 2.2 mapState 映射为计算属性 三、Mutations 变更store中的数据 3.1 this.$store.commit() 触发 mutations 3.1.1 触发 mutations 时传递值 3.2 MapMutations 映射为方法 四、Actions 专门处理异步操作 .
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 ...
vue3.0中setup使用(两种用法)
01-21
　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　Vue3 的一大特性函数 —- setup...
vuex中的辅助函数在vue2.0和vue3.0的分别使用
copyer_xyf的博客
07-10 1707
前言 ​ 最近自己一直在学习vue3，学习到了很多的新知识，非常的感谢coderwhy老师的指导。由于自己一直有做笔记这个习惯，学习到了vuex中的辅助函数，分别在vue2和vue3中的分别使用，以前感觉自己有必要记录下来，来对自己加深印象，巩固基础。 正题 1 、为什么要使用辅助函数 const store = new Vuex.Store({ state: { name: 'james', age: 35, height: 2.03
vue3-mindmap:开发中
04-09
vue3-mindmap（开发中） 相比更新了技术栈：Vue3、d3v6、Vite 目前打算对项目进行重构，解决一些老旧问题（图片生成、加载慢...） 在线演示： 安装 npm install vue3-mindmap PROPS Name Type Default Description v-model Data[] undefined 设置思维导图数据 x-gap Number 50 设置节点横向间隔 y-gap Number 18 设置节点纵向间隔 branch Number 4 设置连线的宽度 drag Boolean false 设置节点是否可拖拽 zoom Boolean false 是否可缩放、拖移 edit Boolean false 是否可编辑 center-btn Boolean false 是否显示居中按钮 fit-btn Boolean false 是否显示缩放按钮
vue学习（7）vuex的辅助函数封装(基于vue3)
qq_39404437的博客
03-03 889
封装了，用更灵活的方式来使用vuex，主要使用的是vuex的createNamespacedHelpers方法，此方法是createNamespacedHelpers 在vuex@^3.1.1 及以上都有。
前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别
qq_38514921的博客
01-15 969
只会比较patchFlags发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。Vue2：进行虚拟节点对比，并返回一个patch对象来存储两个节点的不同，最后用patch记录的消息去局部更新Dom。监测机制的变化、Fragments（碎片）的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。简单数据类型使用ref()方法进行处理，复杂数据类型使用reactive()方法进行处理。Vue3使用setup()方法，setup()方法在组件初始化构造的时候触发。
Vue3 Composition 组合式API+TypeScript使用Vuex
weixin_45966674的博客
09-10 659
这里是可以往里加变量的 当然 接口加了 你实现接口的数据就必须有一样的数据 且要是一样的类型。但我们这个项目集成了ts 所以 我们要在 src下创建一个 store.ts。这里 我们多拿了一个commit 这个工具里就有我们mutations中的方法。然后我们定义了onCountData函数 调用了vuex中的increment。然后我们在 main.ts中引入store.ts中的vuex。但如果你用的是ts格式的语法 这样是会编译报错的。
Vue/Vuex (mutations) 核心概念 方法说明、辅助函数 mapMutations使用方法
m0_64494670的博客
11-13 1768
Vue/Vuex (mutations) 核心概念 方法说明、辅助函数 mapMutations使用方法
vue3.0 封装vuex的mapState、mapGetter、mapAction
低调哥的博客
04-06 2080
vue3.0使用vuex的mapState、mapGetter、mapAction 参考大佬的封装方法，封装vuex的mapState、mapGetter、mapAction，更方便使用 新建useMapper.js import { useStore } from 'vuex' import { computed } from 'vue' export function useStateMapper(mapper, mapFn) { const store = useStore();
vue3.0搭建项目+map地图
09-24 541
1. 进入目录，搭建cli脚手架：npm install -g @vue/cli 2.启动GUI界面：vue ui 3. 根据所选新建项目 4. 安装地图组件：npm install vue-amap --save 5. main.js入口文件： import Vue from 'vue'import VueAMap from 'vue-amap';import App fr...
vue如何关闭sourceMap
weixin_30925411的博客
03-21 3462
Vue打包后出现一些map文件的解决办法： 问题： 可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？ 1，运行 cnpm run build 开始打包 2，会在项目目录下自动创建dist目录，打包好的文件都在其中 解决办法：去src/config/index.js中改一个参数： productionSourceMap:false 把...
vue3中使用vuex辅助函数
07-25
在Vue 3中，你可以使用Vuex辅助函数来简化在组件中使用Vuex的操作。下面是使用Vuex辅助函数的步骤： 首先，确保已经安装了Vuex和Vue 3。 在你的Vue 3项目中，创建一个store文件夹，并在其中创建一个store.js文件。在store.js文件中，你可以定义你的Vuex store，包括状态(state)、mutations、actions等。 ```javascript // store.js import { createStore } from 'vuex'; const store = createStore({ state: { // 状态 }, mutations: { // 修改状态的方法 }, actions: { // 异步操作的方法 }, }); export default store; ``` 在你的根组件(App.vue)中，使用`createApp`函数创建Vue实例时，将store传递给`use`方法，这样整个应用程序都可以访问到store。 ```javascript // App.vue import { createApp } from 'vue'; import store from './store'; createApp(App).use(store).mount('#app'); ``` 现在，你可以在任何组件中使用Vuex辅助函数来访问store中的状态和触发mutations或actions。 在组件中，你可以使用`mapState`辅助函数来将store中的状态映射到组件的计算属性中。 ```javascript // MyComponent.vue import { mapState } from 'vuex'; export default { computed: { ...mapState(['stateProperty']), }, }; ``` 你也可以使用`mapMutations`辅助函数来将mutations映射到组件的methods中，以便在组件中触发mutations。 ```javascript // MyComponent.vue import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(['mutationName']), }, }; ``` 最后，你可以使用`mapActions`辅助函数将actions映射到组件的methods中，以便在组件中触发actions。 ```javascript // MyComponent.vue import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['actionName']), }, }; ``` 这样，你就可以在Vue 3中使用Vuex辅助函数来简化在组件中使用Vuex了。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

arguments_zd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值