关于Vuex中使用mapGetters的应用以及项目实例演示以及gettes从接口获取内容更新

news2024/11/28 19:43:41

哈喽,小伙伴们大家好啊

今天在项目中看到了Vuex,以及看到了mapGettes的使用

1.首先第一步

在src->store->index.js文件中

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

2.然后第二步骤

在getters文件中:

什么getters对象,然后增加我需要的变量

enabletaskbill

同时导出getters变量

第三步:

getters文件来自app.js文件,以下  我需要的变量由于是取自后台接口

const getters = {
 enabletaskbill: state => state.app.enabletaskbill,
}
export default getters
const state = {
enabletaskbill: '';
}
const mutations = {
 SET_GLOBAL_PARAMS(state, data) {
    if (data) {
      data.forEach((item) => {
             state[item.paramcode] = item.paramvalue
        }
      })
    }
  }, 
}
const actions = {
// 获取全局参数,不需要身份校验
  getGlobalParamOfWebFront({ commit }) {
    return new Promise(async(resolve, reject) => {
      const data = {}
      data.paramcode = `enabletaskbill`.replace(/\s+/g, '');
      const res = await getParamListValue(data)
      if (res.code === 200 && res.data) {
        commit('SET_GLOBAL_PARAMS', res.data)
        resolve(res.msg)
      } else {
        reject(res.msg)
      }
    })
}
 
 

第四步:

在我应用文件xxx.vue中

computed: {
    ...mapGetters(['enabletaskbill']),


使用方法fun() {
   this.enabletaskbill
}

如果我需要在我应用文件修改这个变量

this.$store.dispatch('enabletaskbill','具体的值')

参考原文:

(1条消息) vuex中mapGetters的使用及简单实现原理_mapgetters用法_丶叶修的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/590240.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[java]关于会话Session

前言: 客户端向服务端发请求,登陆完之后,进入到首页,如何让客户端知道它有没有登陆过呢,需要从首页里面向服务器发出异步请求,请求当前登录的用户信息,登录过就能获取得到,没登陆过获取不到。 …

Socket安全(二)

文章目录 1. 客户端模式2. 创建安全服务器Socket3. 配置SSLServerSocket 1. 客户端模式 大多数安全通信中,服务器需要使用适当的证书认证自己。不过客户端不需要(淘宝需要向用户证明它确实是淘宝,但我不需要向淘宝证明我自己的身份&#xff…

Skywalking9.4.0部署监控项目

1、SkyWalking简介 SkyWalking是国内开源的基于字节码注入的调用链分析以及应用监控分析工具。特点是支持多种插件,UI功能较强,接入端无代码侵入。目前使用厂商最多,版本更新较快,已成为 Apache 基金会顶级项目。 它有哪些功能呢…

WebGPU你让我等的好辛苦啊

什么是WebGPU WebGPU是一种新兴的Web标准,旨在为Web应用程序提供高性能的图形和计算功能。它是一种低级别的图形API,为开发人员提供了对现代GPU的直接访问,以实现更高效的图形渲染和通用计算。 WebGPU的设计目标是提供与现代图形API&#x…

文心一言 VS 讯飞星火 VS chatgpt (26)-- 算法导论5.1 1题

一、证明:假设在过程 HIRE-ASSISTANT 的第 4 行中,我们总能决定哪一个应聘者最佳。则意味着我们知道应聘者排名的全部次序。 文心一言: 证明: 假设在过程 HIRE-ASSISTANT 的第 4 行中,我们总能决定哪一个应聘者最佳。则意味着我们知道应聘…

png图片压缩后黑底问题解决

问题背景 使用thumbnail对图片进行压缩,偶然会发现对png图片出现黑底的情况如下: 压缩前 压缩后 问题解决 对网上搜到的解决方法主要有两种: 1.指定png输出 JAVA - Get black background when uploading PNG image - Stack Overflow 一…

大数据好找工作么?前景如何

大数据好不好找工作不是一概而论的,要根据你个人的学历情况,掌握技能程度,所在城市招聘需求,甚至是你的面试能力和简历是否突出优势有关。 但是毋庸置疑的是,大数据目前的发展前景还是相当优秀的。 我们知道&#xf…

什么是测试开发,聊聊我对测试开发的看法

目录 前 还没来阿里之前,我对测开的看法 多数人眼中的测试开发 来了阿里之后,对测开看法有了转变 阿里的测开是干嘛的 测试平台的好处和不足 我对测试平台的看法 测试平台是测开必需品吗? 实际项目中用不到测试平台,有必要…

GIT | 日常命令查阅表

最近公司代码管控比较乱,有天就利用分支进行了代码梳理,当时就遇到一些困惑,抽空就把git 再学了一下。 以前我是用git命令的,但是敲命令对我来说还是有点麻烦(主要是git 功力不够),看到有同事用…

jmeter性能测试技巧(欢迎提问,不定时更新)

问题1 如何在大并发测试下,让登录或者后续接口只执行一次? 分析 2023Jmeter性能测试项目实战教程,十年测试大佬手把手教你做性能!_哔哩哔哩_bilibili2023Jmeter性能测试项目实战教程,十年测试大佬手把手教你做性能&…

SQL综合案例之电商漏斗转化分析,pv,uv及

漏斗模型示例: 不同的业务场景有不同的业务路径 : 有先后顺序, 事件可以出现多次 注册转化漏斗 : 启动APP --> APP注册页面--->注册结果 -->提交订单-->支付成功 搜购转化漏斗 : 搜索商品--> 点击商品--->加入购物车-->提交订单-->支付成功…

Scrum中可以有测试人员吗?

作者 | Federico Toledo Scrum 是将质量融入产品开发和创建敏捷团队的宝贵框架。测试人员如何适应这一切?让我们深入研究这篇文章。 毫无疑问,Scrum是在任何环境中为团队寻求业务敏捷性,以及应对不同复杂挑战的最重要工具之一。 正如《福布斯…

在pycharm里安装pytorch环境-GPU版

1、安装Anaconda 在官网下载安装:https://www.anaconda.com/download 2、安装pycharm https://www.jetbrains.com/pycharm/download/#sectionwindows 使用社区版即可。 3、检查conda环境 按winr,输入cmd回车打开命令窗 在命令窗内输入conda 环境无问…

小学课后兴趣班选课平台的设计与实现(ASP.NET,SQLServer)

系统功能模块设计 中小学课后兴趣班选课平台包括前台功能模块和后台功能模块:前台功能模块是给会员使用的功能模块,在前台功能模块中会员可以实现在线注册,登录,查看发布的新闻资讯信息,查看教师,在线留言&…

软件测试的 20 个误区

软件测试中常遇到的 20 个误区,争取能给想从事软件测试的小伙伴一点启发。 1、测试人员不需要了解软件开发知识 抛开自动化测试,测试开发等,这些是必须要学习软件开发知识。功能测试和接口测试等还是需要软件开发知识的,例如新建…

电动汽车、车载充电器及其过流保护电路介绍

摘要:本文通过比亚迪公司的专利了解电动汽车、车载充电器及其过流保护电路,其中,车载充电器包括AC/DC变换器和DC/DC变换器,AC/DC变换器和DC/DC变换器均采用光耦驱动的SiC开关管,过流保护电路包括:电流检测单…

ChatGPT与网络安全

文章目录 一、“AI用于攻击”二、“AI用于安全(防御)”三、“AI的防御”四、“AI被攻击” ChatGPT作为基于生成式预训练模型(GPT)的聊天机器人,其核心技术是自然语言处理(NLP)。随着NLP技术的不…

OS实战笔记(9)-- 构建二级引导器

Grub内核映像格式 Grub工作的时候,需要一个内核映像文件,其中包括了二级引导器模块、内核模块、图片和字库等。这些不同的文件都被放到了一个映像文件中,为了Grub能够正常加载,需要一个预先定义好的格式,以便Grub能解析…

代码实现 ResNet 详解

零、ResNet的介绍 ResNet代码(含详细的使用说明): https://github.com/GarsonWw/resnet-garson.git 当谈到深度学习中的卷积神经网络时,ResNet(Residual Network)是一个备受赞誉且引人注目的架构。ResNet…

最全的mysql编码集问题排查

用navicate导入一个json文件数据的时候,发现中文有一些是乱码的,查了很多资料,发现mysql、navicate编码集都没问题,包括导入流程,那是什么原因呢?想着难道是电脑的编码集影响了?于是调整以后&am…