vue基础——java程序员版(vuex)

​ vuex可以定义共享数据。

1、主要结构

src/store/index.js 是使用vuex的核心js文件。

  • 定义数据:state

  • 修改数据(同步):mutations

  • 修改数据(异步):action=调用=>mutations

    下面定义了一个公共数据msg ,mutations方法setName,action方法sendAjax

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({// 定义共享数据,{{$store.state.msg}}展示,所以得组件都可以使用state: {msg:'这是vuex的公共消息',},getters: {},// 只能由mutations来实现修改,必须是同步操作mutations: {// state代表的是上面的state必须同名,但是后面的参数是形参名字随意,调用:this.$store.commit('setName','新的信息!');setName(state,newMsg){state.msg=newMsg;}},// action可以调用mutations,在action可以执行异步操作(Ajax),调用:this.$store.dispatch('sendAjax');actions: {// 通过传入context来调用mutations方法sendAjax(context){/*** 执行Ajax*/context.commit('setName','异步修改的信息');},},modules: {}
})

2、操作共享数据

​ {{$store.state.msg}}展示数据msg,update1()调用mutations的setName方法修改msg,update2()调用action的sendAjax方法修改msg。

<template>
<div><h1>{{$store.state.msg}}</h1><input type="button" value="直接修改共享数据" @click="update1()"/><input type="button" value="异步修改共享数据" @click="update2()"/>
</div>
</template>
<script>export default {methods:{update1(){// 第一个参数是mutations定义的函数名,第二个是参数this.$store.commit('setName','新的信息!');},update2(){// 调用action方法,指定调用的函数名this.$store.dispatch('sendAjax');}}}
</script>

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

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

相关文章

ShardingSphere水平分表——开发经验(2)

1. 什么场景下分表&#xff1f; 数据量过大或者数据库表对应的磁盘文件过大。 Q&#xff1a;多少数据分表&#xff1f; A&#xff1a;网上有人说1kw&#xff0c;2kw&#xff1f;不准确。 1、一般看字段的数量&#xff0c;有没有包含text类型的字段。我们的主表里面是不允许有t…

【晴问算法】入门篇—日期处理—日期先后

题目描述 给定两个日期DAY1和DAY2&#xff0c;判断DAY1是否在DAY2之前。输入描述 前两行分别为日期DAY1和DAY2(格式为YYYY-MM-DD&#xff0c;范围为1900-01-01≤DAY≤2199-12-31)&#xff0c;数据保证一定合法。输出描述 如果DAY1在DAY2之前&#xff0c;那么输出YES&#xff0c…

从零开始学HCIA之网络基础知识02

1、TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;参考模型&#xff0c;它是当下实际的业界标准。 2、TCP/IP这个名字来自该协议簇中两个非常重要的协议&#xff0c;一个是IP&#xff08;Internet Protocol&#xff09;&#xff0c;另一个是T…

大厂面试--列举并解释一下 http的所有请求方法?

HTTP请求方法 HTTP/1.1定义的请求方法有8种: GET、POST、 PUT、 DELETE、PATCH、 HEAD、OPTIONS、TRACE。 最常的两种GET和POST&#xff0c;如果是RESTful接口的话- -般会 用到GET、POST、 DELETE、 PUT。 OPTIONS 返回服务器针对特定资源所支持的HTTP请求方法&#xff0c;也…

IOS面试题编程机制 51-55

51. 在iPhone应用中如何保存数据?有以下几种保存机制: 1).通过web服务,保存在服务器上 2).通过NSCoder固化机制,将对象保存在文件中 3).通过SQlite或CoreData保存在文件数据库中52. 阐述Block 的理解?并写出一个使用Block执行UIVew动画?Block是可以获取其他函数局部变量的…

ElasticSearch插件安装及配置

Docker安装ElasticSearch docker compose 安装直接看步骤三&#xff1a;新建索引 1、安装elasticsearch &#xff08;1&#xff09;下载elasticsearch和kibana docker pull elasticsearch:7.9.1 docker pull kibana:7.9.1&#xff08;2&#xff09;配置 mkdir -p /mydata/…

Go 限流器-漏桶 VS 令牌桶 常用包原理解析

本文主要介绍两个包Uber漏桶&#xff0c;time/rate令牌桶 可以了解到&#xff1a; 使用方法漏桶/令牌桶 两种限流思想 and 实现原理区别及适用场景应用Case 背景 我们为了保护系统资源&#xff0c;防止过载&#xff0c;常常会使用限流器。 使用场景&#xff1a; API速率限制…

鱼塘钓鱼(多路归并)

有 N 个鱼塘排成一排&#xff0c;每个鱼塘中有一定数量的鱼&#xff0c;例如&#xff1a;N5 时&#xff0c;如下表&#xff1a; 鱼塘编号12345第1分钟能钓到的鱼的数量 &#xff08;1…1000&#xff09;101420169每钓鱼1分钟钓鱼数的减少量&#xff08;1…100)24653当前鱼塘到…

带3090显卡的Linux服务器上部署SDWebui

背景 一直在研究文生图&#xff0c;之前一直是用原始模型和diffuser跑SD模型&#xff0c;近来看到不少比较博主在用 SDWebui&#xff0c;于是想着在Linux服务器上部署体验一下&#xff0c;谁知道并没有想象的那么顺利&#xff0c;还是踩了不少坑。记录一下过程&#xff0c;也许…

YOLO-MS 论文解读

paper&#xff1a;YOLO-MS: Rethinking Multi-Scale Representation Learning for Real-time Object Detection official implementation&#xff1a;https://github.com/fishandwasabi/yolo-ms 背景 尽管已经取得了很好的性能&#xff0c;但识别不同尺度的物体仍是实时目标…

并发容器之CopyOnWrite

CopyOnWrite容器 什么是CopyOnWrite容器呢&#xff1f;CopyOnWrite容器是一个写时复制的容器。在向容器中添加元素时&#xff0c;不会直接向当前容器中添加&#xff0c;而是将当前容器进行copy&#xff0c;复制出一个新的容器&#xff0c;然后往新的容器中添加元素&#xff0c;…

3.24总结

P - 节拍 Zty是一个总是充满热情的人。他想解决世界上各种困难的ACM问题。而且他有一个习惯&#xff0c;他不喜欢解决 一个比他已经解决的问题容易的问题。现在一芬飞给他n个难度问题&#xff0c;在解决另一个问题后告诉他解决的相对时间。 你应该帮助zty找到一个解决问题的顺序…

thymeleaf模板公共块导入不报错,能显示文字但无法显示div的问题解决办法!

本篇文章主要讲解thymeleaf模板公共块导入时,没有任何报错信息,但是进行排查后发现能够显示文字,改成html标签后就无法显示div的问题解决办法! 日期:2024年3月24日 作者:任聪聪 问题现象: 说明:代码好好的,引入的路径也是对的,可以显示文字,但不可以div,自定义公共…

2023年12月青少年软件编程C语言二级真题答案——持续更新.....

一、统计指定范围里的数 给定一个数的序列S,以及一个区间[L, R], 求序列中介于该区间的数的个数,即序列中大于等于L且小于等于R的数的个数。 时间限制:1000 内存限制:65536 输入 第一行1个整数n、,分别表示序列的长度。(0 < n ≤ 10000) 第二行n个正整数,表示序列里…

【Mysql】硬盘性能压测(Sysbench工具)

1、IOPS和吞吐量介绍 IOPS&#xff08;每秒输入/输出操作数&#xff09;&#xff1a;是衡量存储设备每秒能够执行的输入/输出操作的数量。对于数据库等需要频繁读写的应用程序而言&#xff0c;IOPS 是一个关键的性能指标。更高的 IOPS 意味着存储设备能够处理更多的读写请求&am…

检索增强生成(RAG)技术:实现流程、作用及应用案例

一. RAG简介 在自然语言处理&#xff08;NLP&#xff09;领域中&#xff0c;检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;技术巧妙地结合了信息检索与神经网络生成模型的力量&#xff0c;通过在生成过程中引入相关的外部信息&#xff0c;实现了在…

工作思考|研发环境好好的,怎么上线就出问题了?

场景再现 那是一个夜黑风高的晚上&#xff0c;某个版本迭代经过了完备的测试&#xff0c;正准备上线。研发同事A开完了上线评审后&#xff0c;信心满满地对运维同事B说&#xff1a;“开冲&#xff01;” 几分钟后&#xff0c;同事B发了条消息过来&#xff0c;看着抖动的头像&…

实验报告。。。。。

机动车 public class User {public static void main(String[] args) {Vehicle v new Vehicle();System.out.println("设置功率大小&#xff1a;");v.setPower(36);System.out.println("功率大小为&#xff1a;" v.getPower() "kw");v.speed…

【WEEK4】 【DAY5】AJAX - Part Two【English Version】

2024.3.22 Friday Following the previous article 【WEEK4】 【DAY4】AJAX - Part One【English Version】 Contents 8.4. Ajax Asynchronous Data Loading8.4.1. Create User.java8.4.2. Add lombok and jackson support in pom.xml8.4.3. Change Tomcat Settings8.4.4. Mo…

谷粒商城 - 前端基础

1.前端技术栈 2.ES6 2.1简介 2.2 let 与 const <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Doc…