Vue3 Vuex状态管理多组件传递数据简单应用
去官网学习→安装 | Vuex
cd 项目 安装 Vuex: npm install --save vuex
或着 创建项目时勾选Vuex vue create vue-demo
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
(*) Babel
( ) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
>(*) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
运行示例:


Vuex代码:store/index.js
// 引用 Vuex
import { createStore } from 'vuex'
// 引用 axios 网络请求 安装 cnpm install --save axios
import axios from 'axios';//导出 在main.js 引用
export default createStore({//状态管理 通用的数据 数据改变时,组件中引用到此数据的内容都会发生改变state: {name:"张三丰",age: 198},//获取state中的数据 进行数据校验getters: {//自定义个方法 ,进行数据校验getAge(state){return state.age < 200 ? state.age: "张三丰只能活到200岁";}},//用于 更改state中的数据mutations: {//自定义个方法 ,进行数据修改 自定义参数numbaddAge(state,numb){state.age +=numb;}},//Action 提交的是 mutation,而不是直接变更状态。//Action 可以包含任意异步操作。actions: {//自定义个方法 ,获取网络数据 进行数据修改 自定义参数numbasyncAddage({commit}){//http://www.csdnts.com/getTestData.jspx 域名是假的,后台接口已经处理了跨域问题//接口数据:[{"name":"张三丰","sex":"男","age":25},{"name":"周芷若","sex":"女","age":22}]axios.get("http://www.csdnts.com/getTestData.jspx").then(res =>{console.log(res.data);//调用 mutations中 addAge方法 每次+25commit("addAge",(res.data[0]).age)}).catch(err =>{console.log(err);})}},//模块化管理vuex 允许我们将 store 分割成模块(module)。//每个模块拥有自己的 state、mutation、action、getter、//甚至是嵌套子模块——从上至下进行同样方式的分割modules: {}
})
代码:HelloWorld.vue
<template><div class="hello"><h1>{{ msg }}</h1><!-- $store.state --><p>方式一 state中的name->{{$store.state.name}}</p><p>方式一 state中的age->{{$store.state.age}}</p><!-- $store.getters --><p>方式一 getters中的getAge()->{{$store.getters.getAge}}</p><hr><p>方式二 state中的name->{{name}}</p><p>方式二 state中的age->{{age}}</p><p>方式二 getters中的getAge()->{{getAge}}</p><button @click="onClickaddAge">更改年龄数据</button><button @click="asynconClickaddAge">获取网络数据更改年龄</button></div>
</template><script>
//方式二 import mapState
import { mapState } from 'vuex';
//方式二 import mapGetters
import { mapGetters } from 'vuex';// import mapMutations
import { mapMutations } from 'vuex';
// import mapActions
import { mapActions } from 'vuex';export default {name: 'HelloWorld',props: {msg: String},//computed computed:{//State 简化写法...mapState(["name","age"]),//getters ...mapGetters(["getAge"]),},methods:{//mutations 简化写法...mapMutations(["addAge"]),onClickaddAge(){//this.$store.commit 调用getAge 参数 20// this.$store.commit("addAge",20)this.addAge(1);},//actions...mapActions(["asyncAddage"]),asynconClickaddAge(){// this.$store.dispatch() 调用 asyncAddage()//this.$store.dispatch("asyncAddage")this.asyncAddage();}}}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>
代码:main.js
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//router
import router from './router'
//vuex
import store from './store'//.use(store)
createApp(App).use(store).use(router).mount('#app')
代码:AboutView.vue
<template><div class="about"><h1>关于-页面</h1><!-- $store.state 直接引用 --><p>方式一 state中的name->{{ $store.state.name }}</p><p>方式一 state中的age->{{ $store.state.age }}</p><!-- $store.getters --><p>方式一 getters中的getAge()->{{$store.getters.getAge}}</p><hr><p>方式二 state中的name->{{name}}</p><p>方式二 state中的age->{{age}}</p></div>
</template><script>
//方式二 imper mapState
import { mapState } from 'vuex';export default {name: 'AboutView',//computed 获取State 中数据computed:{...mapState(["name","age"])}
}
</script>
相关文章:
Vue3 Vuex状态管理多组件传递数据简单应用
去官网学习→安装 | Vuex cd 项目 安装 Vuex: npm install --save vuex 或着 创建项目时勾选Vuex vue create vue-demo ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to se…...
Beats:安装及配置 Metricbeat (一)- 8.x
在我之前的文章: Beats:Beats 入门教程 (一)Beats:Beats 入门教程 (二) 我详细描述了如何在 Elastic Stack 7.x 安装及配置 Beats。在那里的安装,它通常不带有安全及 Elasticsearc…...
openCV使用c#操作摄像头
效果如下: 1.创建一个winform的窗体项目(框架.NET Framework 4.7.2) 2.Nuget引入opencv的c#程序包(版本最好和我一致) 3.后台代码 using System; using System.Collections.Generic; using System.ComponentModel;…...
Centos 防火墙命令
查看防火墙状态 systemctl status firewalld.service 或者 firewall-cmd --state 开启防火墙 单次开启防火墙 systemctl start firewalld.service 开机自启动防火墙 systemctl enable firewalld.service 重启防火墙 systemctl restart firewalld.service 防火墙设置开…...
【第二讲---初识SLAM】
SLAM简介 视觉SLAM,主要指的是利用相机完成建图和定位问题。如果传感器是激光,那么就称为激光SLAM。 定位(明白自身状态(即位置))建图(了解外在环境)。 视觉SLAM中使用的相机与常见…...
C++ 面向对象三大特性——继承
✅<1>主页:我的代码爱吃辣 📃<2>知识讲解:C 继承 ☂️<3>开发环境:Visual Studio 2022 💬<4>前言:面向对象三大特性的,封装,继承,多态ÿ…...
LC-相同的树
LC-相同的树 链接:https://leetcode.cn/problems/same-tree/solutions/363636/xiang-tong-de-shu-by-leetcode-solution/ 描述:给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同,并…...
RocketMQ部署 Linux方式和Docker方式
一、Linux部署 准备一台Linux机器,部署单master rocketmq节点 系统ip角色模式CENTOS10.4.7.126Nameserver,brokerMaster 1. 配置JDK rocketmq运行需要依赖jdk,安装步骤略。 2. 下载和配置 从官网下载安装包 https://rocketmq.apache.org/zh/downlo…...
css内容达到最底部但滚动条没有滚动到底部
也是犯了一个傻狗一样的错误 ,滚动条样式是直接复制的蓝湖的代码,有个高度,然后就出现了这样的bug 看了好久一直以为是布局或者overflow的问题,最后发现是因为我给这个滚动条加了个高度,我也是傻狗一样的,…...
机器学习深度学习——transformer(机器翻译的再实现)
👨🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——自注意力和位置编码(数学推导代码实现) 📚订阅专栏:机器…...
神经网络基础-神经网络补充概念-30-搭建神经网络块
概念 搭建神经网络块是一种常见的做法,它可以帮助你更好地组织和复用网络结构。神经网络块可以是一些相对独立的模块,例如卷积块、全连接块等,用于构建更复杂的网络架构。 代码实现 import numpy as np import tensorflow as tf from tens…...
在线吉他调音
先看效果(图片没有声,可以下载源码看看,比这更好~): 再看代码(查看更多): <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8&quo…...
Windows11 Docker Desktop 启动 -wsl kernel version too low
系统环境:windows11 1:docker下载 Docker: Accelerated Container Application Development 下载后双击安装即可 安装后启动Docker提示:Docker Desktop -wsl kernel version too low 处理起来也是非常方便 1:管理员身份启动:…...
Golang 中的 unsafe 包详解
Golang 中的 unsafe 包用于在运行时进行低级别的操作。这些操作通常是不安全的,因为可以打破 Golang 的类型安全性和内存安全性,使用 unsafe 包的程序可能会影响可移植性和兼容性。接下来看下 unsafe 包中的类型和函数。 unsafe.Pointer 类型 通常用于…...
linux 的swap、swappiness及kswapd原理【转+自己理解】
本文讨论的 swap基于Linux4.4内核代码 。Linux内存管理是一套非常复杂的系统,而swap只是其中一个很小的处理逻辑。 希望本文能让读者了解Linux对swap的使用大概是什么样子。阅读完本文,应该可以帮你解决以下问题: swap到底是干嘛的…...
什么是Java中的适配器模式?
Java中的适配器模式(Adapter Pattern)是一种设计模式,它允许我们将一种类的接口转换成另一种类的接口,以便于使用。适配器模式通常用于在不兼容的接口之间提供一种过渡性的接口,从而使代码更加灵活和可维护。 在Java中…...
MYSQL线上无锁添加索引
在需求上线过程中,经常会往一个数据量比较大的数据表中的字段加索引,一张几百万数据的表,加个索引往往要几分钟起步。在这段时间内,保证服务的正常功能运行十分重要,所以需要线上无锁添加索引,即加索引的语…...
如何实现客户自助服务?打造产品知识库
良好的客户服务始于自助服务。根据哈佛商业评论,81% 的客户在联系工作人员之前尝试自己解决问题。92% 的客户表示他们更喜欢使用产品知识库/帮助中心。 所以本文主要探讨了产品知识库是什么,有哪些优势以及如何创建。 产品知识库是什么 产品知识库是将…...
LeetCode环形子数组的最大和(编号918)
目录 一.题目 二.解题思路 三.解题代码 一.题目 918. 环形子数组的最大和 给定一个长度为 n 的环形整数数组 nums ,返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上, nums[i] 的下一个元素是 nums[…...
PhpOffice/PhpSpreadsheet读取和写入Excel
PhpSpreadsheet是一个纯PHP编写的组件库,它使用现代PHP写法,代码质量和性能比PHPExcel高不少,完全可以替代PHPExcel(PHPExcel已不再维护)。使用PhpSpreadsheet可以轻松读取和写入Excel文档,支持Excel的所有…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid,其中有多少个 3 3 的 “幻方” 子矩阵&am…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
Matlab实现任意伪彩色图像可视化显示
Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中,如何展示好看的实验结果图像非常重要!!! 1、灰度原始图像 灰度图像每个像素点只有一个数值,代表该点的亮度(或…...
Element-Plus:popconfirm与tooltip一起使用不生效?
你们好,我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip,产品要求是两个需要结合一起使用,也就是鼠标悬浮上去有提示文字,并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...
XXE漏洞知识
目录 1.XXE简介与危害 XML概念 XML与HTML的区别 1.pom.xml 主要作用 2.web.xml 3.mybatis 2.XXE概念与危害 案例:文件读取(需要Apache >5.4版本) 案例:内网探测(鸡肋) 案例:执行命…...
从0开始一篇文章学习Nginx
Nginx服务 HTTP介绍 ## HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。 ## HTTP工作在 TCP/IP协议体系中的TCP协议上&#…...
