Vue之状态管理的简单使用(事件总线(Event Bus),Vuex和若依前端示例)

文章目录

  • Vue之状态管理的简单使用(事件总线(Event Bus),Vuex和若依前端示例)
    • Vue之事件总线(Event Bus)的简单使用
    • Vuex进行状态管理的简单使用
    • 若依前端代码store状态管理:

Vue之状态管理的简单使用(事件总线(Event Bus),Vuex和若依前端示例)

使用事件总线(Event Bus)或通过 Vuex 进行状态管理。这两种方法都可以实现在异步操作完成后通知Vue组件执行特定的方法

Vue之事件总线(Event Bus)的简单使用

1.安装依赖

npm install vue-bus

2.main.js中引入和使用 Vue Bus

// main.js
import Vue from 'vue';
import App from './App.vue';
import VueBus from 'vue-bus';Vue.use(VueBus);new Vue({render: h => h(App),
}).$mount('#app');

3.组件中通过 $bus 来使用 Vue Bus

// YourComponent.vue
export default {methods: {sendMessage() {// 发送消息this.$bus.emit('message', 'Hello from Vue Bus!');},},created() {// 监听消息this.$bus.on('message', message => {console.log('Received message:', message);});},
};

在这个例子中,通过 $bus.emit 方法发送了一个名为 ‘message’ 的消息,并通过 $bus.on 方法在组件创建时监听了这个消息。

请注意,Vue Bus 是一个简单的事件总线实现,用于在 Vue 组件之间进行通信。如果你的项目较大或需要更高级的状态管理,考虑使用 Vuex。

Vuex进行状态管理的简单使用

简单使用 Vuex 主要包括以下几个步骤:

1.安装 Vuex: 首先,确保你的 Vue.js 项目已经安装了 Vuex。如果没有安装,可以通过以下命令进行安装:

npm install vuex

2.创建 Vuex Store: 在你的项目中创建一个 Vuex store。这个 store 就是用来存储应用的状态的地方。通常,你需要在一个单独的文件中创建它,例如 store.js:

// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {// 在这里定义你的状态count: 0},mutations: {// 在这里定义修改状态的方法increment(state) {state.count++;},decrement(state) {state.count--;}}
});

3.将 Vuex Store 集成到你的 Vue 应用中: 在你的主应用文件(通常是 main.js)中导入并使用 Vuex:

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({render: h => h(App),store // 将 store 注入到根实例中
}).$mount('#app');

4.在组件中使用状态和触发 mutations: 在你的组件中,你可以使用 mapState 辅助函数来映射 Vuex store 中的状态,并使用 mapMutations 辅助函数来映射 mutations。例如,在一个组件中:

<!-- MyComponent.vue -->
<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { mapState, mapMutations } from 'vuex';export default {computed: {...mapState(['count']) // 映射 count 到组件的计算属性},methods: {...mapMutations(['increment', 'decrement']) // 映射 mutations 到组件的方法}
};
</script>

在这个例子中,count 是从 Vuex store 中映射到组件的计算属性,而 increment 和 decrement 方法则是映射到组件的方法中,可以通过按钮点击来触发相应的 mutations。

这就是一个简单的 Vuex 使用的基本示例。当然,Vuex 还提供了更多高级的特性,根据项目的需要,你可以使用 getter、actions 等来进一步组织和管理你的状态(可以参考若依前后端分离的前端代码)。

若依前端代码store状态管理:

1.Vuex store的index.js
在这里插入图片描述
2.其中一个store模块的示例dict.js
在这里插入图片描述
3.更方便的使用store状态属性值的getters.js
在这里插入图片描述
4. Vuex Store 集成到你的 Vue 应用中main.js中引入
在这里插入图片描述
在这里插入图片描述
5.组件中使用
(1)getters的使用(vue页面或者js组件中使用)

//1.直接使用
this.$store.getters.dict
//2.先引入再使用
import store from "@/store";
store.getters.dict

(2)actions和getters的使用示例(vue页面或者js组件中使用)
在这里插入图片描述
关于若依的这些截图是部分若依字典关于store的示例,若想详细了解若依字典的逻辑可参考我的如下文章:
若依字典的使用
vue之若依字典的导入使用(不直接使用若依框架,只使用若依字典)

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

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

相关文章

云原生时代下,操作系统生态的挑战与机遇

在云计算快速发展的背景下&#xff0c;服务器操作系统的产业升级&#xff0c;不再局限于物理服务器层面&#xff0c;市场边界扩张&#xff0c;人工智能、大数据、云计算等新技术的发展也对操作系统的灵活度和智能化提出新的要求。在 2023 龙蜥操作系统大会上&#xff0c;龙蜥社…

pytorch学习笔记(十二)

以下代码是以CIFAR10这个10分类的图片数据集训练过程的完整的代码。 训练部分 train.py主要包含以下几个部件&#xff1a; 准备训练、测试数据集用DateLoader加载两个数据集&#xff0c;要设置好batchsize创建网络模型&#xff08;具体模型在model.py中&#xff09;设置损失函…

深入了解C++:底层编译原理

进程的虚拟空间划分 任何编程语言&#xff0c;都会产生两样东西&#xff0c;指令和数据。 .exe程序运行的时候会从磁盘被加载到内存中&#xff0c;但是不能直接加载到物理内存中。Linux会给当前进程分配一块空间&#xff0c;比如x86 32位linux环境下会给进程分配2^32(4G)大小…

vue3页面跳转产生白屏,刷新后能正常展示的解决方案

可以依次检查以下问题&#xff1a; 1.是否在根组件标签最外层包含了个最大的div盒子包裹内容。 2.看看是否在template标签下面直接有注释&#xff0c;如果有需要把注释写到div里面。&#xff08;即根标签下不要直接有注释&#xff09; 3.在router-view 中给路由添加key标识。 …

c# cass10 获取宗地内所有封闭线段的面积

获取面积的主要流程如下&#xff1a; 获取当前AutoCAD应用中的活动文档、数据库和编辑器对象。创建一个选择过滤器&#xff0c;限制用户只能选择"宗地"图层上的LWPOLYLINE对象作为外部边界。提示用户根据上述规则进行实体选择&#xff0c;并获取选择结果。检查用户是…

前端下载导出文件流,excel/word/pdf/zip等

** 一、导入导出接口增加responseType:‘blob’ ** axios({url: 接口,method: post,data&#xff1a;{},responseType: blob });二、导出方法封装 //data 文件流 //fileName 文件名称 /* mineType 文件类型例如&#xff1a;* 下载 Excel : "application/vnd.m…

(附源码)ssm 招聘信息管理系统-计算机毕设 78049

ssm 招聘客户管理系统 摘 要 由于数据库和数据仓库技术的快速发展&#xff0c;招聘客户管理系统建设越来越向模块化、智能化、自我服务和管理科学化的方向发展。招聘客户系统对处理对象和服务对象&#xff0c;自身的系统结构&#xff0c;处理能力&#xff0c;都将适应技术发展的…

逃避自由是所有成长的前提

《逃避自由》是埃里希弗洛姆的一部重要作品&#xff0c;首次出版于1941年。该书主要探讨了现代人在面对自由和独立时所表现出的逃避倾向。在这部作品中&#xff0c;弗洛姆分析了自由的心理学基础&#xff0c;并论证了自由不仅仅是一个政治和经济的概念&#xff0c;更是一个深刻…

脚本工具 mktemp 和 install

1.创建临时文件 mktemp 1.1 介绍 mktemp 命令用于创建并显示临时文件&#xff0c;可避免冲突 使用mktemp命令时&#xff0c;它会根据指定的模板在临时目录&#xff08;默认为/tmp&#xff09;中创建一个唯一的临时文件或目录&#xff0c;并返回该文件或目录的完整路径。临时…

2023年12月CCF-GESP编程能力等级认证Python编程一级真题解析

一、单选题(共15题,共30分) 第1题 某公司新出了一款无人驾驶的小汽车,通过声控智能驾驶系统,乘客只要告诉汽车目的地,车子就能自动选择一条优化路线,告诉乘客后驶达那里。请问下面哪项不是驾驶系统完成选路所必须的。( )(2023年12月py一级) A:麦克风 B:扬声器 C…

工作中的小记录

1、在element的el-dialog中上传附件后在另一个el-form-item下的input输入框中获取该附件名 使用v-model无法双向绑定。使用this.$set this.$set(this.formData,"属性名","属性值")2、后端传来文件地址&#xff0c;点击直接下载 getCaseId(this.$route.quer…

datawhale 大模型学习 第十一章-大模型法律篇

简介 新技术与法律关系&#xff1a;大型语言模型&#xff08;LLM&#xff09;的出现引发了对现有法律适用性的探讨&#xff0c;尤其是在版权、隐私和公平使用等方面。互联网法律挑战&#xff1a;互联网的匿名性和无国界特性对法律的管辖权提出了挑战。法律与道德区分&#xff…

在线UI设计工具有哪些?这5个包你满意

随着 UI 设计行业的蓬勃发展&#xff0c;越来越多的设计师进入 UI 设计&#xff0c;选择一款方便的 UI 设计工具尤为重要&#xff01;除了传统的 UI 设计工具&#xff0c;在线 UI 设计工具也受到越来越多设计师的青睐。这种不受时间、地点和计算机配置限制的工作方法真的很刺激…

Python处理图片生成天际线(2024.1.29)

1、天际线简介 天际线&#xff08;SkyLine&#xff09;顾名思义就是天空与地面的边界线&#xff0c;人站在不同的高度&#xff0c;会看到不同的景色和地平线&#xff0c;天空与地面建筑物分离的标记线&#xff0c;不得不说&#xff0c;每天抬头仰望天空&#xff0c;相信大家都可…

屈子祠镇黑鱼岭,不可移动文物预防性保护系统守遗珍

一、何止秦俑 秦陵苑囿青铜水禽等文物集中展出 文物保护&#xff0c;尤其是不可移动文物的保护&#xff0c;一直都是文化遗产的重要环节。湖南省汨罗市屈子祠镇双楚村黑鱼岭墓地&#xff0c;作为长江中游地区的重大考古发现&#xff0c;其商朝晚期的历史背景赋予其不可估量的历…

c# 语音播报

在C#中进行语音播报通常需要使用.NET Framework中的某个语音库或服务。一个常见的选择是使用System.Speech.Synthesis命名空间中的SpeechSynthesizer类&#xff0c;该类提供了文本到语音的转换功能。 以下是一个简单的示例&#xff0c;演示如何在C#中使用SpeechSynthesizer进行…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-6 绘制几何图形

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>绘制几何图形</title> </head><body><canvas id"canvas" width"250" height"150" style"border: 1px b…

QUIC with CUBIC or BBR

拥塞控制 拥塞控制算法是 TCP/QUIC 协议的一个基础部分&#xff0c;多年来经过一个个版本的迭代&#xff08;如 Tahoe、Reno、Vegas 等&#xff09;&#xff0c;拥塞控制算法得到了持续的提升。由于篇幅有限&#xff0c;本文就目前比较流行的两种拥塞控制算法&#xff08;CUBI…

SVM支持向量机

1.基本概念 支持向量机&#xff08;Support Vector Machine&#xff0c;SVM&#xff09;是一种有监督学习方法&#xff0c;主要用于分类和回归分析。它的基本思想是在特征空间中找到一个超平面&#xff0c;能够将不同类别的样本分开&#xff0c;并且使得离这个超平面最近的样本…

Linux 链接 GitHub 出现 Connection timed out

问题 安装GIT并完成公钥验证&#xff1a;Linux 系统拉取 Github项目 [rootxxx devtools]# ssh -T gitgithub.com ssh: connect to host github.com port 22: Connection timed out解决方案 进入在存放公钥私钥id_rsa.pub文件里&#xff0c;新建/修改config文本 [rootxxx my…