学习day59

昨天学了插槽,但是没有即笔记了

今天的是vuex

总体来说,vuex就是一个共享单车,每个人都可以使用他,也可也对他进行反馈。即把一个数据列为vuex,然后每个组件可以使用这个对象,也可也反过来反馈他

这一个设计是将A组件的一个数据作为公共来共享

求和案例,纯vue版

APP.vue

<template><div class="container"><Count/></div>
</template><script>import Count from './components/Count'export default {name:'App',components:{Count}}
</script>

Count.vue

<template><div><h1>当前求和为:{{sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字sum:0 //当前的和}},methods: {increment(){this.sum += this.n},decrement(){this.sum -= this.n},incrementOdd(){if(this.sum % 2){this.sum += this.n}},incrementWait(){setTimeout(()=>{this.sum += this.n},500)},},}
</script><style>button{margin-left: 5px;}
</style>

这一个是当使用vuex来设计时

vuex原理

store(其实就是下图Vuex):Actions,Mutations,State的父亲,它们三个之间的状态转换(灰色箭头的api)由store提供(store.dispatch,store.commit等等)

Actions:一个普普通通的Object类型对象,vc的改变会先通过store.dispatch()将值传递给action。然后经由action通过store.commit()发送给Mutations。

Actions还可以通过ajax和后端交互,就是下图中的Backend API,通过后端接口拿数据,也是组装到Action中

如果不调用Backend API,VC可以直接将数据交给Mutations,绕开Actions。也就是说Actions是可以跳过的

Mutations(n. 突变,变更):它是一个Object类型的对象。负责真正处理,加工修改数据,处理完成后将处理完成的数据传入State中

Vue的开发工具,Devtools,监测的就是Mutations里的数据

State:也是一个Object类型的对象,vuex会将里面的数据进行渲染,还给VC,更新VC

VUEX的求和案例

main.js

import Vue from 'vue'
import App from './App.vue'
//引入vuex
import Vuex from 'vuex'
//引入store
import store from './store'Vue.config.productionTip = falsenew Vue({el:"#app",render: h => h(App),store,beforeCreate(){Vue.prototype.$bus = this}
})

APP.vue

<template><div class="container"><Count/></div>
</template><script>import Count from './components/Count'export default {name:'App',components:{Count}}
</script>

Count.vue

<template><div><h1>当前求和为:{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.dispatch('jia',this.n)},decrement(){this.$store.dispatch('jian',this.n)},incrementOdd(){this.$store.dispatch('jiaOdd',this.n)},incrementWait(){this.$store.dispatch('jiaWait',this.n)	},},mounted(){console.log('Count',this)}}
</script><style>button{margin-left: 5px;}
</style>

index.js

//该文件用于创建VUex中最为核心的storeimport Vue from 'vue'//引入Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)//准备actions -用于响应组件中的动作
const actions ={jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)},jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)} },jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(() => {context.commit('JIA',value)}, 500);}
}//准备mutations -用于操作数据(state)
const mutations={JIA(state,value){console.log('mutations中的JIA被调用了')state.sum +=value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -=value},
}//准备state -用于存储数据
const state ={sum:0 //当前的和 
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

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

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

相关文章

vim的使用介绍以及命令大全

懒羊羊感谢大家的关注和三连支持~ 目录 前言 一、vim的使用介绍 二、命令大全 1.命令模式 &#xff08;1&#xff09;复制&#xff08;配合粘贴命令p使用&#xff09; &#xff08;2&#xff09;剪切 &#xff08;3&#xff09;粘贴 &#xff08;4&#xff09;删除 …

centos安装flink,通过windows访问webui

1. 安装flink 1.1. flink的下载 通过flink官网下载flink安装包 https://flink.apache.org/ 下载安装包 1.2 flink在centos上的安装 将下载好的flink-1.17.1-bin-scala_2.12.tgz安装包放到centos目录下 解压文件&#xff1a; [rootlocalhost ~]# tar -zxvf flink-1.17.…

数据分享|WEKA信贷违约预测报告:用决策树、随机森林、支持向量机SVM、朴素贝叶斯、逻辑回归...

完整报告链接&#xff1a;http://tecdat.cn/?p28579 作者&#xff1a;Nuo Liu 数据变得越来越重要&#xff0c;其核心应用“预测”也成为互联网行业以及产业变革的重要力量。近年来网络 P2P借贷发展形势迅猛&#xff0c;一方面普通用户可以更加灵活、便快捷地获得中小额度的贷…

【广州华锐互动】云智慧工厂数字孪生:打造高效、灵活的智能制造新模式

随着工业4.0的到来&#xff0c;数字孪生技术逐渐成为实现工业生产智能化升级的关键。云智慧工厂数字孪生利用先进的数字化技术&#xff0c;创建物理实体的虚拟模型&#xff0c;实现对生产过程的实时监控、优化与管理。 云智慧工厂数字孪生是指通过数字孪生技术&#xff0c;构建…

thinkphp5.0 composer 安装oss提示php版本异常

场景复现&#xff1a; 本地 phpstudy 环境&#xff0c;安装的有7.0到7.3三个版本&#xff0c;首先确认composer已经安装 composer安装阿里云oss的命令为&#xff1a;composer require aliyuncs/oss-sdk-php 运行报错&#xff1a; Problem 1- Root composer.json requires php…

leetcode 88:合并两个有序数组 。 双指针解法

题目 算法 双指针 code var merge function(nums1, m, nums2, n) {// 其实就是一个nums1数组从后向前的降序重排&#xff0c;从最后开始&#xff0c;比较nums1有效位置和nums2当前位置数的大小&#xff0c;依次填入&#xff0c;nums2最后若有剩余&#xff0c;则再多一步从后…

AI绘画:StableDiffusion实操教程-完美世界-魔女(附高清图下载)

前段时间我分享了StableDiffusion的非常完整的教程&#xff1a;“AI绘画&#xff1a;Stable Diffusion 终极宝典&#xff1a;从入门到精通 ” 尽管如此&#xff0c;还有读者反馈说&#xff0c;尽管已经成功安装&#xff0c;但生成的图片与我展示的结果相去甚远。真实感和质感之…

【数据结构】 Map和Set详解

文章目录 &#x1f340;Map与Set的概念及场景&#x1f333;Map与Set模型介绍&#x1f3a8;Map 的使用&#x1f4cc;Map说明&#x1f4cc;Map.Entry<K, V>的说明&#x1f4cc;Map 的常用方法说明&#x1f6a8;注意事项&#x1f6a9;TreeSet的使用 &#x1f38b;Set 的说明…

Java面试题(持续更新中)

一、Java基础集合多线程JVM 1.Java基础 1.1面向对象和面向过程的区别 面向过程&#xff1a;面向过程的性能比面向对象高。因为类调用时需要实例化&#xff0c;消耗比较大&#xff0c;比较消耗资源&#xff0c;所以当性能是最重要的考量因素的时候&#xff0c;比如单片机、Li…

华为云云耀云服务器L实例评测|centos系统搭建git私服

搭建git私服 前言一、华为云云耀云服务器L实例租用二、华为云云耀云服务器L实例安装git三、华为云云耀云服务器L实例git配置1.创建文件用于存放公钥2.设置文件权限3.配置本地公钥 四、华为云云耀云服务器L实例部署git仓库四、git仓库到本地总结 前言 之前一直想搭建一个属于自…

react中使用Modal.confirm数据不更新的问题解决

在使用Modal.confirm的时候今天发现了个疑惑的问题&#xff0c;为什么我明明从新set了数据而页面视图没有变化&#xff0c;查了一下官方文档找到了答案&#xff0c;解决了这个问题&#xff0c;特意在这里留下痕迹。 import { Button, Col, Form, Input, Modal, Radio, Row, Se…

OPENCV+QT环境配置

【qtopencv开发入门&#xff1a;4步搞定opencv环境配置2】https://www.bilibili.com/video/BV1f34y1v7t8?vd_source0aeb782d0b9c2e6b0e0cdea3e2121eba 第一步&#xff1a; 安装QT Qt 5.15 第二步&#xff1a; 安装OPENCV VS2022 Opencv4.5.5 C 配置_愿飞翔的鱼儿的博客…

SpringBoot底层注解

文章目录 前言一、Configuration二、Import导入组件三、Conditional条件装配四、ImportResource导入Spring配置文件五、ConfigurationProperties配置绑定总结 前言 本文主要讲诉Configuration、Import、Conditional、ImportResource、ConfigurationProperties注解。 先将实体…

【DockerCE】Docker-CE 24.0.6正式版发布

官网下载地址&#xff08;For RHEL/CentOS 7.9&#xff09;&#xff1a; https://download.docker.com/linux/centos/7/x86_64/stable/Packages/ 相对于24.0.5版本&#xff0c;本次24.0.6版本更新的rpm包有 5 个&#xff0c;使用目录对比软件对比的结果如下&#xff1a; 在Lin…

使用融云 CallPlus SDK,一小时实现一款 1V1 视频应用

9 月 21 日&#xff0c;融云直播课 社交泛娱乐出海最短变现路径如何快速实现一款 1V1 视频应用&#xff1f; 欢迎点击小程序报名~ 1V1 音视频、远程服务类应用的实现利器——融云 CallPlus SDK 上线&#xff01; 关注【融云全球互联网通信云】了解更多 作为新一代音视频通话场…

RuoYi若依管理系统最新版 基于SpringBoot的权限管理系统

RuoYi是一个后台管理系统&#xff0c;基于经典技术组合&#xff08;Spring Boot、Apache Shiro、MyBatis、Thymeleaf&#xff09;主要目的让开发者注重专注业务&#xff0c;降低技术难度&#xff0c;从而节省人力成本&#xff0c;缩短项目周期&#xff0c;提高软件安全质量。 本…

前端代理报错Error occured while trying to proxy to: localhost:端口

webpack配置进行前端代理时&#xff0c; 报错信息如下&#xff1a;(DEPTH_ZERO_SELF_SIGNED_CERT) 需设置&#xff1a;secure为false即可解决此报错 // webpack配置前端代理config["/test"]{target: https://xxxx.com,changeOrigin: true,secure: false // 这个配置…

CentOS 安装HTTP代理服务器 Tinyproxy

Tinyproxy是一个小型的基于GPL的HTTP/SSL代理程序&#xff0c;非常适合小型网络而且便于快速部署。这个代理程序最大的优点就是占用系统资源比较少。这里使用的系统为CentOS7.6&#xff0c;可以直接 yum 方式安装。 yum install tinyproxy -y 如果提示找不到安装包&#xff0…

列表和字典练习

定义四个学生信息 在Python环境下&#xff0c;用列表定义&#xff1a; >>> stu1[xiaoming,True,21,79.9] >>> stu1[lihong,False,22,69.9] >>> stu1[zhangqiang,True,20,89.9] >>> stu1[EMT,True,23,99.9]如图&#xff0c;定义了四个列表…

LeetCode 刷题记录——从零开始记录自己一些不会的

1. 最多可以摧毁的敌人城堡数目 题意 思路 两层循环&#xff0c;太low了 用一个变量记录前一个位置 代码 class Solution { public:int captureForts(vector<int>& forts) {int ans 0, pre -1;for (int i 0; i < forts.size(); i) {if (forts[i] 1 || forts…