Vuex 组件间通讯

组件间通讯 Vuex

https://vuex.vuejs.org/zh/

在这里插入图片描述

基本原理

在这里插入图片描述

数据提取到父级

// index 文件
import Vue from 'vue'
import Vuex from "vuex"
import tab from './tab' // 引入 modules


Vue.use(Vuex) // 全局引入

// 创建 Vuex 实例
export default new Vuex.Store({
    modules: {
        tab
    }
})
// tab 模块
export default {
    state: {
        isCollapse: false // 控制菜单的展开还是收起
    },
    mutations: {
        // 修改菜单展开收起
        collapseMenu(state) { 
            state.isCollapse = !state.isCollapse;
        }
    }

}

挂在到 min 上

在这里插入图片描述

使用全局共享的数据

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Win10 开始菜单、微软app和设置都打不开(未解决)

环境: Win10专业版 问题描述: Win10 开始菜单、微软app和设置都打不开,桌面个性话打开就报错,打开个性化该文件没有与之关联的程序来执行该操作 解决方案: 一般造成原因是MS-Settings文件系统错误 1.先重启电脑(重…

深入解析序列模型:全面阐释 RNN、LSTM 与 Seq2Seq 的秘密

探索序列建模的基础知识和应用。 简介 序列建模是许多领域的一个重要问题,包括自然语言处理 (NLP)、语音识别和语音合成、时间序列预测、音乐生成和「生物信息学」。所有这些任务的共同点是它们需要坚持。接下来的事情的预测是基于历史的。例如,在“哈桑…

面试题-6

1.精灵图和base64的区别是什么? 精灵图:把多张小图整合到一张大图上,利用定位的一些属性把小图显示在页面上,当访问页面可以减少请求,提高加载速度 base64:传输8bit字节代码的编码方式,把原本二进制形式转为64个字符的单位,最后组成字符串 …

Linux 串口应用编程

1 串口 API Linux串口通信: 在 Linux 系统中,操作设备的统一接口就是: open/ioctl/read/write 。 对于 UART ,又在 ioctl 之上封装了很多函数,主要是用来设置行规程。所以对于 UART ,编程的套路就是…

iceberg学习笔记(2)—— 与Hive集成

前置知识: 1.了解hadoop基础知识,并能够搭建hadoop集群 2.了解hive基础知识 3.Iceberg学习笔记(1)—— 基础知识-CSDN博客 可以参考: Hadoop基础入门(1):框架概述及集群环境搭建_TH…

Chrome添加扩展程序

Crx4Chrome 下载crx 打开扩展程序 如果拖动crx文件到扩展程序提示只能通过Chrome应用商店添加此项内容 修改crx文件后缀为zip并解压,再拖动到扩展程序

CXL崛起:2024启航,2025年开启新时代

在2019年,Intel主导联合多家阿里巴巴、Facebook(也就是改名后Meta)、谷歌、Dell、华为、思科、微软、HPE最初的八巨头,发布了新的互联协议CXL,全称Comupte Express Link。由于在服务器领域享有绝对领导地位,Intel一经号令&#xf…

消息中间的应用场景

1、异步处理 比如用户在电商网站下单,下单完成后会给用户推送短信或邮件,发短信和邮件的过程就可以异步完成。因为下单付款是核心业务,发邮件和短信并不属于核心功能,并且可能耗时较长,所以针对这种业务场景可以选择先…

【Qt开发流程】之程序主窗口

描述 就目前的应用程序而言,一般包含菜单栏、工具栏、状态栏、中央区域等。 qt窗口部件类图如下: 一个主窗口提供了一个构建应用程序用户界面的框架。 Qt有QMainWindow及其相关类来管理主窗口。 QMainWindow有自己的布局,可以向其中添加QTo…

测试之路,女孩子软件测试-职业规划建议,路就在脚下...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、测试岗是不是加…

Upwork 新手使用指南——如何快速在Upwork上接单

Upwork 这个自由职业平台不知道大家听说过没,在 Upwork,如果你是自由职业者,你可以接单;如果你是客户,你可以找人干活。但对于新手来说,怎么使用 Upwork 并且用好 Upwork 是一大难题。因此今天给大家分享 U…

Mistral 7B 比Llama 2更好的开源大模型 (四)

Mistral 7B在平衡高性能和保持大型语言模型高效的目标方面迈出了重要的一步。通过我们的工作,我们的目标是帮助社区创建更实惠、更高效、更高性能的语言模型,这些模型可以在广泛的现实世界应用程序中使用。 Mistral 7B在实践中,对于16K和W=4096的序列长度,对FlashAttentio…

Modbus转Profinet网关在污水处理系统中连接PLC和变频器Modbus通信案例

污水处理系统中使用Modbus转Profinet网关可以连接PLC和变频器,实现二者之间的通信。该网关的作用是将PLC与变频器之间的Modbus协议转换为Profinet协议,使两者可以相互沟通。在污水处理系统中,PLC控制污水处理的各个过程,而变频器则…

机器学习二元分类 二元交叉熵 二元分类例子

二元交叉熵损失函数 深度学习中的二元分类损失函数通常采用二元交叉熵(Binary Cross-Entropy)作为损失函数。 二元交叉熵损失函数的基本公式是: L(y, y_pred) -y * log(y_pred) - (1 - y) * log(1 - y_pred)其中,y是真实标签&…

【性能测试】稳定性测试要点-监控关键指标总结(超细整理)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、稳定性测试的要…

接口与抽象类的区别

Java中的接口(Interface)和抽象类(Abstract Class)都是实现抽象化的关键机制,但它们在用途和功能上有着明显的区别。以下是接口和抽象类之间的主要区别: 抽象类(Abstract Class) 含…

Docker之虚悬镜像(查看、删除)

虚悬镜像: 仓库名、标签都是的镜像,俗称dangling image 查看 docker image ls -f danglingtrue删除 虚悬镜像已经失去存在价值,可以删除 docker image prune

LeetCode977.有序数组的平方(双指针法、暴力法、列表推导式)

LeetCode977.有序数组的平方 1.问题描述2.解题思路3.代码4.知识点 1.问题描述 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求也按 非递减顺序 排序。 示例 1: 输入:nums [-4,-1,0,3,10] …

要事第一:如何通过6个步骤确定项目的优先级

当收到很多项目请求并且每个请求都是重中之重时,该怎么办?从最易完成的开始?还是先解决最大的问题? 实际上两种做法都不对。确定项目优先级的更好方法是评估以下内容,而不是关注项目规模或完成时长: ● 每…

3.8-镜像的发布

如果我们想将image push到docker hub里面,那么我们的image的名字一定要是这种格式:docker hub id/imageName,例如:lvdapiaoliang/hello-docker docker hub个人账户设置地址: 在push之前要先登录: docker l…