Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters、mapState、mapGetters
1、在state中新增用户数组
2、新增Person.vue组件
提示:这里使用nanoid来生成新用户的id。nanoid的安装:npm i nanoid
。
如果提示权限不够,使用管理员命令窗口
只需要引入另外一个组件中操作的state的数据
computed: {
personList() {
return this.$store.state.personList;
},
//另外一个组件操作的数据
Count(){
return this.$store.state.sum
}
},
<template>
<div>
<h1>人员信息展示</h1>
<h3 style="color:pink">Count组件的和为:{{Count}}</h3>
<input type="text" placeholder="请输入姓名" v-model="name" />
<button @click="add">添加</button>
<ul>
<li v-for = "p in personList" :key = "p.id">{{p.name}}</li>
</ul>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
name: "Person",
data() {
return {
name: "",
n: 1,
};
},
methods: {
add(){
const personObj = {id:nanoid(),name:this.name}
this.$store.commit('ADD_PERSON',personObj)
this.name = ''
}
},
computed: {
personList() {
return this.$store.state.personList;
},
Count(){
return this.$store.state.sum
}
},
};
</script>
<style lang="css">
</style>
3、在Count组件中使用Person组件操作的数据
首先引入
然后使用
4、测试效果
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)的更多相关文章
- Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)
在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...
- Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)
这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...
- Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)
@ 目录 1.概念 2.何时使用? 3.搭建vuex环境 3.1 创建文件:src/store/index.js 3.2 在main.js中创建vm时传入store配置项 4.基本使用 4.1.初始化 ...
- vue学习【四】vuex快速入门
大家好,我是一叶,今天我们继续踩坑.今天的内容是vuex快速入门,页面传值不多的话,不建议vuex,直接props进行父子间传值就行,使用vuex就显得比较臃肿. 我们先预览一下效果,如图1所示. 图 ...
- Vue学习系列(四)——理解生命周期和钩子
前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- Vue学习笔记之vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
- vue 学习五 深入了解components(父子组件之间的传值)
上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 // ...
- vue学习-day05 -- 案例:名字合并(监听data数据的改变)
1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...
随机推荐
- 数据仓库模型之CDM、LDM与PDM的区别
在数据仓库建设中,概念数据模型设计与逻辑数据模型设计.物理数据模型设计是数据库及数据仓库模型设计的三个主要步骤. conceptual data model 概念数据模型是最终用户对数据存储的看法,反 ...
- Linux 时间设置和同步服务
修改日期时间的工具 date hwclock timedatectl date工具的使用 作用:显示和设置系统时间 选项: -d <字符串> 显示字符串所指的日期与时间,比如:" ...
- React报错之No duplicate props allowed
正文从这开始~ 总览 当我们为相同的组件传递相同的属性多次时,就会导致"No duplicate props allowed"警告.为了解决该警告,请确保只传递一次该属性.比如说, ...
- 9. 利用Docker快速构建MGR | 深入浅出MGR
目录 1.安装Docker 2.拉取GreatSQL镜像,并创建容器 2.1 拉取镜像 2.2 创建新容器 2.3 容器管理 3.构建MGR集群 3.1 创建专用子网 3.2 创建3个新容器 3.3 ...
- MySQL更新锁表超时 Lock wait timeout exceeded
背景 最近在做一个订单的钉钉审批功能,钉钉审批通过之后,订单更新审核状态,然后添加一条付款,并且更新付款状态: // 订单审批通过 @Transactional(rollbackFor = Excep ...
- java-循环
1.循环:反复执行一段相同或相似的代码(逻辑相似或者相同)2.循环三要素: 1.循环变量的初始化 2.循环的条件(以循环变量为基础) 3.循环变量的改变(向着循环的结束变)循环变量:在整个循环过程中所 ...
- 渗透攻防Web篇-深入浅出SQL注入
1 背景 京东SRC(Security Response Center)收录大量外部白帽子提交的sql注入漏洞,漏洞发生的原因多为sql语句拼接和Mybatis使用不当导致. 2 手工检测 2.1 前 ...
- ABC209F. Deforestation——DP(、数学容斥)
题面 有 n n n 棵树排成一排,每棵树高度为 h i ( i ∈ [ 1 , n ] ) h_i~(i\in[1,n]) hi (i∈[1,n]) ,你现在要按照一个排列 P P P 的顺序去砍 ...
- 全链路追踪体验—最简陋TraceId的生成
对于后端开发来说,排查问题是常有的事情.而排查问题时最常用的就是看日志,看一次调用中经过了哪些系统,是那个系统出问题了.这就需要业务日志中关联调用链的TraceId信息,从而在应用出现问题时,能够通过 ...
- 窗口部件-基础窗口部件 QWidget
1 基础窗口部件 QWidget QWidget 类是所有用户界面对象的基类,被称为基础窗口部件.不多废话直接看代码 main.cpp 如下 #include<QtWidgets> int ...