vue脚手架 vuex模块化和四大辅助函数的结合使用

目录

01 四大辅助函数结合vuex模块化的使用

02 event-bus事件总线的使用


 

01 四大辅助函数结合vuex模块化的使用

        mapState 在映射模块化带有命名空间的使用步骤:

        方式一:(重要)

                ...mapState('模块名1',['该模块的变量1','该模块的变量2'....])

                ...mapState('模块名2',['该模块的变量1','该模块的变量2'....])

                如果渲染了多个模块的变量到当前组件里面 必须写多个...mapState

        方式二:(了解)

                ...mapState({

                       自定义变量名1:state=>state.模块名.该模块的变量1,

                       自定义变量名1:state=>state.模块名.该模块的变量2,

                })

        方式三(了解):

                ...mapState('模块名1',{

                        自定义变量名1:state=>state.该模块的变量名1,

                        ...

                })

                ...mapState('模块2',{

                        自定义变量名1:state=>state.该模块的变量名1,

                        自定义变量名2:state=>state.该模块的变量名2,

                        ...

                })

        mapGetters 在映射模块化带有命名空间的使用步骤:

        方式一:(重要)

                ...mapGetters('模块名1',['该模块的变量1','该模块的变量2'....])

                ...mapGetters('模块名2',['该模块的变量1','该模块的变量2'....])

                如果渲染了多个模块的变量到当前组件里面 必须写多个...mapGetters

        方式二:(了解)

                ...mapGetters({

                       自定义变量名1:state=>state.模块名.该模块的变量1,

                       自定义变量名1:state=>state.模块名.该模块的变量2,

                })

        方式三(了解):

                ...mapGetters('模块名1',{

                        自定义变量名1:state=>state.该模块的变量名1,

                        ...

                })

                ...mapGetters('模块2',{

                        自定义变量名1:state=>state.该模块的变量名1,

                        自定义变量名2:state=>state.该模块的变量名2,

                        ...

                })

        mapMuattions结合命名空间进行映射:

        方式一:(不常用)

                ...mapMutations(['模块名/方法名'])  调用时 this.['模块名/方法名'](传参)

        方式二:(常用)

                ...mapMutations('模块名',['该模块下的方法名'])  调用时: this.该模块下的方法名(传参)

        mapActions结合命名空间进行映射:

        方式一:(不常用)

                ...mapActions(['模块名/方法名'])  调用时 this.['模块名/方法名'](传参)

        方式二:(常用)

                ...mapActions('模块名',['该模块下的方法名'])  调用时: this.该模块下的方法名(传参)

02 event-bus事件总线的使用

        vuex最大的弊端就是太笨重  只适合大型项目

        如果小型项目想要进行传参: 可以父子组件传参  路由传参 地址栏拼接,

        session/local/cookie进行传参 组先组件给后代传参(后期讲)  event-bus(事件总线)。

        event-bus事件总线:

                原理就是: 事件的发布订阅模式

                订阅就是关注  发布就是直播

                vue对象.$on( ) 事件订阅(关注)

                vue对象.$emit( ) 事件发布(直播)

           需要找到一个空的vue对象 专门用来发布和订阅的

           目前main.js里面创建的这个new Vue是vue对象  但是这个vue对象已经做了很多事情了,

           所以需要找一个空的vue对象专门处理发布,订阅功能

                订阅事件:(需要在事件发布之前)

                vue对象.$on('要发布的事件名称','事件驱动函数')

                驱动函数里面接收事件发布者传递的数据

                发布事件:

                vue对象.$emit('要发布的事件名称', 传参1,传参2...)

        

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

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

相关文章

深入探究RTOS的IPC机制----邮箱

阅读引言: 因为将来工作需要, 最近在深入学习OS的内部机制,我把我觉得重要的、核心的东西分享出来, 希望对有需要的人有所帮助, 阅读此文需要读友有RTOS基础, 以及一些操作系统的基础知识, 学习…

行列式和矩阵的区别

目录 一、行列式 1. 行列式的定义 2. (全)排列 3. 逆序数 二、矩阵 1. 矩阵的定义 三、行列式和矩阵的区别 四、参考书目 一、行列式 1. 行列式的定义 2. (全)排列 3. 逆序数 二、矩阵 1. 矩阵的定义 三、行列式和矩阵的区别 四、参考书目 同济大学数学系. 工程数学…

【LeetCode面试经典150题】105. 从前序与中序遍历构造二叉树

一、题目 105. 从前序与中序遍历序列构造二叉树 - 力扣(LeetCode)给定两个整数数组 preorder 和 inorder ,其中 preorder 是二叉树的先序遍历, inorder 是同一棵树的中序遍历,请构造二叉树并返回其根节点。 二、思路 …

Dynamics 365 on-premise 隐藏高级查找导出按钮

提示 着急可以直接看结果代码部分 背景 Dynamics 365 on-premise中有个高级查找的功能,查询的结果支持导出,如下图 业务反馈这个有数据安全风险,要修改显示规则。 一开始想着能用RibbonWorkbench改,就很爽快得答应了业务。结果用RibbonWorkbench改不了。 反复尝试 既…

Linux远程管理日志

实验介绍 本实验旨在实现主机将日志远程发送到堡垒机或远程服务器上,实现通过一台机器管理整个网络内的主机的效果。 准备两台虚拟机作为生产主机和管理机,保证网络通畅,展示如下: 关闭firewalld,通过配置rsyslog&a…

Sklearn之朴素贝叶斯应用

目录 sklearn中的贝叶斯分类器 前言 1 分类器介绍 2 高斯朴素贝叶斯GaussianNB 2.1 认识高斯朴素贝叶斯 2.2 高斯朴素贝叶斯建模案例 2.3 高斯朴素贝叶斯擅长的数据集 2.3.1 三种数据集介绍 2.3.2 构建三种数据 2.3.3 数据标准化 2.3.4 朴素贝叶斯处理数据 2.4 高斯…

Treeselect是介绍及使用(梳理了我使用这个组件遇到的大部分问题)

介绍: Treeselect是一款基于Vue.js的树形选择器组件,可以快速地实现树形结构的选择功能。 这里梳理了我使用这个组件遇到的大部分问题 安装依赖: 首先,你需要在你的项目中安装Treeselect的依赖。这通常可以通过npm或yarn等来完…

基于STM32和人工智能的智能农业监测系统

目录 引言环境准备智能农业监测系统基础代码实现:实现智能农业监测系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统4.4 用户界面与数据可视化应用场景:智能农业管理与优化问题解决方案与优化收尾与总结 1. 引言 智能农业监测系统通过结合STM32嵌…

Linux - 输入输出

一、输出格式 echo //末尾自带换行 -n //取消自带换行 -e //支持转移符 常见转义符 \n换行 \t制表符 printf // 格式化输出字符串 %-10s // %s代表字符串 -10 左对齐容纳10个字符 二、输入输出重定向 file descriptors &#x…

Java集合底层源码剖析-Vector和Stack

文章目录 概述Vector成员变量关键方法添加元素 (add, addElement)删除元素 (remove)注意事项 Stack类定义与继承压栈 (push)弹栈 (pop)查看栈顶元素 (peek)源码解析总结 概述 在Java中,Stack 类是一个基于 Vector 实现的经典栈数据结构。由于 Vector 类本身是线程安…

Python | Leetcode Python题解之第155题最小栈

题目: 题解: class MinStack:def __init__(self):self.stack []self.min_stack [math.inf]def push(self, x: int) -> None:self.stack.append(x)self.min_stack.append(min(x, self.min_stack[-1]))def pop(self) -> None:self.stack.pop()sel…

AD域离线破解新思路:Trustroasting和TimeRoasting

简介 近期Tom Tervoort发表了白皮书《TIMEROASTING, TRUSTROASTING AND COMPUTER SPRAYING》并在Github发布了名为Timeroast的工具包,其中介绍了几种新的攻击思路TimeRoasting、Trustroasting和计算机账户密码喷洒,本篇文章主要对TimeRoasting和Trustro…

从零开始:使用ChatGPT快速创作引人入胜的博客内容

随着科技的飞速发展,人工智能逐渐渗透到我们生活的各个领域。无论是商业、教育还是娱乐,AI技术都在以惊人的速度改变着我们。特别是在内容创作领域,人工智能正发挥着越来越重要的作用。今天,我将和大家分享如何从零开始&#xff0…

无约束动态矩阵控制(DMC)

0、前言 动态矩阵控制(Dynamic Matrix Control,DMC)是一种典型的模型预测控制方法,其不需要被控对象的数学模型,只需要获取被控对象的阶跃响应序列即可实现控制效果,但其需要被控对象是渐近稳定的。 1、稳…

SVN学习(002 svn冲突解决)

尚硅谷SVN高级教程(svn操作详解) 总时长 4:53:00 共72P 此文章包含第20p-第p29的内容 冲突 产生冲突的操作 (第一种 相互不影响的操作) 用户1修改第二行 用户2修改第四行 用户1提交 用户2提交,提交的时候会提示版本已过时 这时将用…

常见漏洞扫描工具

Fortify Fortify是Micro Focus旗下AST (应用程序安全测试)产品,其产品组合包括:Fortify Static Code Analyzer提供静态代码分析器(SAST),Fortify WebInspect是动态应用安全测试软件&#xff08…

Hadoop 2.0 大家族(一)

目录 一、Hadoop 2.0大家族概述(一)分布式组件(二)部署概述 二、ZooKeeper(一)ZooKeeper简介(二)ZooKeeper 入门 一、Hadoop 2.0大家族概述 (一)分布式组件 …

python flask 连接mysql

from flask import Flask, render_template from datetime import datetime from flask_sqlalchemy import SQLAlchemyapp Flask(__name__) # MySQL所在的主机名 HOSTNAME 127.0.0.1 # MySQL监听端口号,默认3306 PORT 3306 # 连接MySQL的用户名 USERNAME root #…

如何使用bt引擎-蚂蚁磁力搜索引擎大全?

bt引擎-蚂蚁磁力链接是一种特殊的下载链接,磁力链接可以理解为一个文件识别码,而并非具体的资源地址,下载软件需要拿着这个识别码去整个互联网(DHT网络)去寻找持有该资源的用户(节点),如果找到则可以进行传输下载。一般年代越久远…

代码随想录算法训练营DAY43|完全背包、518. 零钱兑换 II、377. 组合总和 Ⅳ、70. 爬楼梯 (进阶)

完全背包 题目链接:完全背包 def material_bag(N, V, weight, value):dp [0] * (V1)for i in range(N):for j in range(weight[i], V1):dp[j]max(dp[j], dp[j-weight[i]]value[i])return dp[V]if __name____main__:N,V map(int, input().split())weight []valu…