Vue学习笔记-模块化+命名空间

目的

让代码更好维护,让多种数据分类更加明确(不同的模块挤在一个index.js中显得臃肿且不方便管理)

实现方式

  1. 修改store/index.js(也可以将不同模块分别写在不同的js文件中)

    const countAbout = {//开启命名空间namespaced:true,actions:{......},mutations:{......},state:{sum:0,},getters:{bigSum(state){return state.sum*10}}
    }const personAbout = {namespace = true,//开启命名空间state = {list:[xxx]},mutations = {...},actions = {...}
    }const store = new Vuex.Store({modules:{countAbout,personAbout}
    })
    
  2. 开启命名空间后,组件读取各个模块的state数据

    //方式一:直接读取
    this.$store.state.countAbout.sum
    //方式二:借助mapState读取
    ...mapState('countAbout',['sum',...])
    
  3. 组件读取各个模块的getters数据

    //方式一:直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取
    ...mapGetters('personAbout',['firstPersonName'])
    
  4. 组件调用dispatch

    //方式一:直接调用
    this.$store.dispatch('personAbout/addPerson',value)
    //方式二:借助mapActions
    ...mapActions('personAbout',{addPerson:'addPerson'})
    
  5. 组件调用commit

    //方法一:直接调用
    this.$store.commit('personAbout/ADD_PERSON',value)
    //方式二:借助mapMutations
    ...mapMutations('personAbout',{ADD_PERSON:'ADD_PERSON'})
    

注意:mapActions和mapMutation中无法填写函数参数,需要在html组件的@click方法声明中自己填写

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

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

相关文章

Html网页threejs显示obj,ply三维图像实例

程序示例精选 Html网页threejs显示obj,ply三维图像实例 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《Html网页threejs显示obj,ply三维图像实例》编写代码,代码整洁&#xff0…

uniapp上架app store详细攻略

​ 目录 uniapp上架app store详细攻略 前言 一、登录苹果开发者网站 二、创建好APP 前言 uniapp开发多端应用,打包ios应用后,会生成一个ipa后缀的文件。这个文件无法直接安装在iphone上,需要将这个ipa文件上架app store后,才…

php框架dcat-admin速查笔记

要想灵活的使用dcat-admin框架开发,必须知道框架有哪些类提供给我们使用. 每一个自定义的按钮,弹框,信息展示,小组件都用到特定的类和接口. 常用核心类 Dcat\Admin\Http\Controllers\AdminController 需要继承的公共控制器 Dcat\Admin\Layout\Content 布局核心 Dcat\Admin\Gr…

c语言-数据在内存中的存储

文章目录 1. 整数在内存中的存储2. 大小端字节序和字节序判断3. 浮点数在内存中的存储 1. 整数在内存中的存储 1.整数的2进制表示方法有三种,即 原码、反码和补码 2. 三种表示方法均有符号位和数值位两部分,符号位都是用0表示“正”,用1表示“…

前端下载文件或者图片方式,window.open或者a标签形式

首先分别讲一下下载文件的方式都有哪些 1.通过a标签的方式下载文件 <a href"http://www.baidu.com" download"baidu.html">下载</a> 我们点击下载&#xff0c;发现是跳转到了百度的首页&#xff0c;并没有真的下载文件。 因为a标签下载只能…

[Java][单列集合+数组遍历方法]通过Lambda表达式简化匿名内部类遍历数组学习体会

在分享本文之前&#xff0c;我们需要先了解两种思想——面向对象式编程与函数式编程思想 面向对象编程和函数式编程是两种不同的编程范式&#xff0c;它们的思想和实现方式有很大的差异。可以将它们比作两种不同的制作蛋糕的方式&#xff1a; 面向对象编程就像是在制作一个三…

客服管理者如何有效管理客服团队,有哪些高效方式?

在如今的市场竞争中&#xff0c;客户服务是企业成功的关键因素之一。因此&#xff0c;客服团队的有效管理至关重要。客服管理者需要了解如何有效地管理客服团队&#xff0c;以确保客户的满意度和忠诚度&#xff0c;从而提高企业的竞争力。 以下是客服管理者如何有效管理客服团队…

CSS特效020:涌动的弹簧效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

206. 反转链表

206. 反转链表 题目&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例&#xff1a; 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1…

【Openstack Train安装】六、Keystone安装

OpenStack是一个云计算平台的项目&#xff0c;其中Keystone是一个身份认证服务组件&#xff0c;它提供了认证、授权和目录的服务。其他OpenStack服务组件都需要使用Keystone来验证用户的身份和权限&#xff0c;并且彼此之间需要相互协作。当一个OpenStack服务组件接收到用户的请…

绿色积分如何拉伸经济发展?场景适用何处?

一、引言 绿色积分发展政策是一种新兴的商业模式&#xff0c;它旨在通过积分奖励的方式鼓励消费者和企业采取环保行为&#xff0c;促进绿色消费和可持续发展。这种商业模式不仅有利于环境保护&#xff0c;也有利于提高消费者和企业的参与度和粘性&#xff0c;为商业模式的创新和…

C++: String类接口学习

文章目录 STL简介一. 为什么要有string类二. STL 中的 string 类介绍1. string 类描述2. 关于 basic_string 三. string 类的常用接口1. string 类的常见构造2. string 类的容量操作size 和 lengthcapacitymax_sizereserveresize 3. string 类对象的访问及遍历操作operator[] 和…

网站公安备案流程

1.公安备案网址 https://beian.mps.gov.cn/ 选择用户登录->法人用户登录 左边的码下载APP&#xff0c;登上去之后用APP扫右边的码&#xff0c;人脸识别

mysql子查询及其子查询的合并

表结构为 表名 notice 游戏类型 n_type(斗地主1、斗地主2、斗地主3) 资讯 n_news (新闻、活动、公告) 时间 n_time 需求 查询notice表中游戏类型为“斗地主1”的最新一条新闻、最新一条活动、最新一则公告&#xff0c;只能使用一条sql语句 思路 查询分为三个部分&am…

Python三级 每周练习题28

如果你感觉有收获&#xff0c;欢迎给我微信扫打赏码 ———— 以激励我输出更多优质内容 题目: 1.运行hex(),得到 xa&#xff0c;括号里面填什么? 2.十六进制数100&#xff0c;对应10进制数是多少? 3.int(‘13’,8) 返回值是? 4.int(‘100010’,2) 返回值是? 5.int(‘2af…

强基固本,红海云数字化重塑提升国企干部管理能力

国有企业的干部管理体系建设具有重要的战略意义&#xff0c;对于构建高素质专业化的干部队伍&#xff0c;推动企业高质量发展至关重要。特别是在党的二十大以后&#xff0c;建设中国特色现代企业制度&#xff0c;在完善公司治理中加强党的领导&#xff0c;加强党管干部党管人才…

C# 调用 c++ dll

C# 调用 c dll 首先 c 库 dll 要定义 代码中定义 CPP_EXPORTS #ifdef LASERSDK_EXPORTS #define CPP_EXPORTS __declspec(dllexport) #else #define CPP_EXPORTS __declspec(dllimport) #endif编译器定义 LASERSDK_EXPORTS 普通函数 c extern "C" CPP_EXPORTS …

ucharts中,当数据为0时,不显示

当为0时&#xff0c;会显示出来&#xff0c;值比较小的时候&#xff0c;数据会显示在一起&#xff0c;不美观 期望效果&#xff1a; 实现步骤&#xff1a; 我是将uCharts插件下载导入到src/uni_modules下的 1、修改src/uni_modules/qiun-data-charts/js_sdk/u-charts/confi…

【漏洞复现】OpenTSDB 2.4.0 命令注入(CVE-2020-35476)漏洞复现

漏洞描述 官方文档这样描述:OpenTSDB is a distributed, scalable Time Series Database (TSDB) written ontop of HBase; 翻译过来就是,基于Hbase的分布式的,可伸缩的时间序列数据库。 主要用途,就是做监控系统;譬如收集大规模集群(包括网络设备、操作系统、应用程序…

有趣的代码——猜数字游戏的实现

前面介绍过很多的C语言常识&#xff0c;但是我们都知道“兴趣是最好的老师”&#xff0c;所以&#xff0c;今天我们用之前讲过的一些知识&#xff0c;加上部分新补充的知识点&#xff0c;写一个“猜数字”的小游戏&#xff0c;来丰富我们的编程学习生活&#xff0c;感受来自C语…