手动实现vuex中mapGetters

最新推荐文章于 2024-03-07 11:05:45 发布
最新推荐文章于 2024-03-07 11:05:45 发布
阅读量366 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EWJRQKJRQ/article/details/115833109
版权

vuex中mapGetters

在我们读取vuex的数据的时候通常是这么读取的

	console.log(this.$store.state.book.test)

如果这样反复使用会发现有很大的代码冗余量

因此，vue也提供了mapGetters这种好用的方法

首先在store目录下新建一个getters文件夹
在这里插入图片描述
然后在其内部将需要反复读取的数据组合成一个对象，并暴露出去
在这里插入图片描述
同时还要在store下的index文件中配置引入和使用
在这里插入图片描述
然后在需要获取数据的vue文件中引入vue中的mapGetters方法
在这里插入图片描述
其次就是将mapGetters方法传入一个数组进行执行，并将他混入在计算属性之中

最低0.47元/天 解锁文章
April_CuiCui
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex2.0+Vue2.0构建备忘录应用实践
09-01
在Vuex 2.0与Vue 2.0结合构建备忘录应用实践中，我们可以按照以下步骤来设计和实现： 1. **初始化项目**：首先，我们需要创建一个基于Vue 2.0的项目，并安装Vuex 2.0作为状态管理库。这可以通过使用`vue-cli`或手动...
vuex——计算属性获取的getter值需要刷新才能更新
Juliet_xmj的博客
03-31 2066
vuex——计算属性获取的getter值需要刷新才能更新 描述： // state state: { leader: null }, // getters getters: { getLead: state => state.leader } // mutations mutations: { setLead (state, data) { state.leader = data } }, // 页面中赋值 // 登录时改变state.le
VUE_修改vuex数据的方法，mapGetters获取数据
小歪博客
06-09 1705
vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { memberType:0, }, mutations: { upMemberType(state,type){ state.memberType = type } }, actions: { }, modules: { } }) 调用vuex方法修改数据 th
vuex getters和mapGetters 视图不更新的问题
qq_26642611的博客
04-27 2895
import { getInfo } from "@/api/user"; import Vue from "vue"; const state = { ExchangePointMinLimitValue: "" }; const mutations = { SET_EXCHANGEPOINTLIMITVALUE: (state, exchangepointminlimitva...
Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
haoduoyu2099的博客
11-28 5285
Vue3 组合式(setup)关于mapState和mapGetters直接使用会因为computed中没有this而报错，故而对其重新封装，给每个mapState和mapGetters返回的每个函数都绑定一个store对象
数据需要刷新后显示（Vue）
qq_22841387的博客
11-07 2890
vue 需要刷新后显示 问题描述 我的页面数据出现了需要刷新后才能更新数据，或者需要往复几次才能渲染上去 解决方法 解决方法其实很简单，就是因为你没有清空数据 方法一：直接清空data域 this.judgeData = [] 方法二：再次调用接口（数据来自接口） 在这里，我的数据来自getDetail 而且无法直接使用方法一 this.getDetail() var time = setInterval(() => { this.checkIndex++
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
11-29
【Vuex 中的 State】 Vuex 的核心概念之一就是 State，它是整个应用的单一状态树。...这样，组件就可以直接调用 Store 中的方法，无需手动传递参数或关心 State 的管理细节，提高了代码的可读性和可维护性。
Vue 实现手动刷新组件的方法
12-07
在Vuex中，创建一个名为`viewId`的状态，并提供对应的`getter`、`mutation`和`action`： ```javascript // store/view.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new ...
vuex购物车：带有Vuex的VueJS
02-16
6. **Vue组件与Vuex的交互**：使用`mapState`、`mapMutations`、`mapActions`和`mapGetters`辅助函数，可以方便地在Vue组件中绑定Vuex的状态、提交mutations、调用actions和计算属性。 通过以上这些知识点，我们...
vue-vuex
03-10
同时，`mapGetters`辅助函数允许组件直接获取Vuex Store中的数据，减少冗余代码。 在实际项目中，Vue.js和Vuex的结合应用可以帮助团队遵循一定的架构规范，提高代码的可测试性和可维护性。通过合理地划分组件职责，...
vue: 解决vuex页面刷新数据丢失问题
ZHU20200222的博客
03-27 290
vue:解决vuex页面刷新数据丢失问题 一、问题描述 1、一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。 2、我在一个组件（例如登录组件页面）中登录了后，其它页面要怎么获取和响应这个变化，使用通过计算属性实现响应数据的变化，mapGetters获取vuex comp...
Vue 知识点
LTTKX的博客
09-20 235
关于Vue的相关知识点
vuex中mapGetters的使用及简单实现原理
最新发布
s_156的博客
03-07 1481
通过引入mapGetters 我们就可以轻松的取到vuex中存储的数据，从代码中可以看出，getters就类似于vue组件中的computed（计算属性），在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中，在组件不多，组件的数据通信不是很多的时候这样写看似将简单的东西复杂化了，但是在稍复杂点的项目中这样会极大的减少工作量，及组件之间数据传递的复杂程度。在上面的代码中可能很多人在项目中用到过，但是对于其原理可能不是很理解。先看下store部分目录结构。index.js文件。
Vuex入门（3）—— getters,mapGetters,...mapGetters详解
热门推荐
我不是水哥
08-30 14万+
Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } } 但是如果你的其他组件也要使用这...
VueX mapGetters 获取 Modules 中的Getters
weixin_43959963的博客
12-16 6822
注明 : permission 是你要获取的Modules中的哪一个 (permission 即是 模块名); ...mapGetters("permission",[ 'ReturnRoutes' ]), ...mapGetters("模块名",[ '方法名' ]), 非辅助函数映射获取方式 : this.$store.getters["permission/ReturnRoutes"] this.
vuex getters和mapGetters不更新的问题
_程昊的博客
03-26 1万+
在compents里面commit了state也更新了，但是getters和mapGetters却没有更新,显示undefined vuex代码: import {setCode, getCode} from '@/utils/api' import Vue from 'vue' const user = { states: { code: getCode(), current...
记一次vuex的mapGetters无效原因
我是涛锅
09-20 1万+
报错是（error during evaluation)，见下图。代码大概是下面这样，import store from './store.js'computed: { ...mapGetters('project', [ 'isOpenSupplyNeed', ]), a(){ return store.getters['project/is
vue中实现定时刷新页面以及菜单定时自动跳转
qq_29124867的博客
05-27 1124
1、在mixins文件下新建mixinsMenu.js import { mapGetters } from 'vuex' import {getStore} from '@/utils/store' const boardMixins={ computed:{ ...mapGetters(['pageIndex']), userInfo(){ return getStore({name: 'userInfo'}) } }, created(){
vuex mapGetters 如何传参
07-17
在 Vuex 中使用 `mapGetters` 传递参数有两种方法： 方法一：使用辅助函数 你可以使用辅助函数 `createNamespacedHelpers` 创建带有命名空间的辅助函数，并将它们与 `mapGetters` 一起使用。这样，你可以在组件中通过传递参数来访问特定的 getter。 首先，导入 `createNamespacedHelpers` 辅助函数： ```javascript import { createNamespacedHelpers } from 'vuex'; ``` 然后，在组件中创建命名空间的辅助函数： ```javascript const { mapGetters } = createNamespacedHelpers('yourNamespace'); ``` 接下来，使用 `mapGetters` 辅助函数来映射 getter 到组件的计算属性中，并传递参数： ```javascript computed: { ...mapGetters(['yourGetter']), computedGetter() { return this.yourGetter('yourParameter'); } } ``` 方法二：手动映射 如果你不想使用辅助函数，你可以手动映射 getter 到组件的计算属性，并在方法中传递参数。 首先，在组件中导入 Vuex 的 `mapGetters`： ```javascript import { mapGetters } from 'vuex'; ``` 然后，将 getter 映射到组件的计算属性中，并在方法中传递参数： ```javascript computed: { ...mapGetters({ yourGetter: 'yourNamespace/yourGetter' }), computedGetter() { return this.yourGetter('yourParameter'); } } ``` 在上述示例中，`yourNamespace` 是你的命名空间名称，`yourGetter` 是你的 getter 名称，`yourParameter` 是你要传递给 getter 的参数。 这样，你就可以在组件中使用带参数的 `mapGetters` 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值