【Vue】练习-mutations的减法功能

文章目录

  • 一、需求
  • 二、完整代码

一、需求

68321724875

步骤

68321726825


二、完整代码

Son1.vue

<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值: <label>{{ $store.state.count }}</label><br><button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleAdd(10)">值 + 10</button><button @click="handleChange">一秒后修改成666</button><button @click="changeFn">改标题</button><hr><!-- 计算属性getters --><div>{{ $store.state.list }}</div><div>{{ $store.getters.filterList }}</div><hr><!-- 测试访问模块中的state - 原生 --><div>{{ $store.state.user.userInfo.name }}</div><button @click="updateUser">更新个人信息</button><button @click="updateUser2">一秒后更新信息</button><div>{{ $store.state.setting.theme }}</div><button @click="updateTheme">更新主题色</button><hr><!-- 测试访问模块中的getters - 原生 --><div>{{ $store.getters['user/UpperCaseName'] }}</div></div>
</template><script>
export default {name: 'Son1Com',created () {console.log(this.$store.getters)},methods: {updateUser () {// $store.commit('模块名/mutation名', 额外传参)this.$store.commit('user/setUser', {name: 'xiaowang',age: 25})},updateUser2 () {// 调用action dispatchthis.$store.dispatch('user/setUserSecond', {name: 'xiaohong',age: 28})},updateTheme () {this.$store.commit('setting/setTheme', 'pink')},handleAdd (n) {// 错误代码(vue默认不会监测,监测需要成本)// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念,进行修改数据// 需要提交调用mutation// this.$store.commit('addCount')// console.log(n)// 调用带参数的mutation函数this.$store.commit('addCount', {count: n,msg: '哈哈'})},changeFn () {this.$store.commit('changeTitle', '传智教育')},handleChange () {// 调用action// this.$store.dispatch('action名字', 额外参数)this.$store.dispatch('changeCountAction', 666)}}
}
</script><style lang="css" scoped>
.box{border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label>{{ count }}</label><br /><button @click="subCount(1)">值 - 1</button><button @click="subCount(5)">值 - 5</button><button @click="subCount(10)">值 - 10</button><button @click="changeCountAction(888)">1秒后改成888</button><button @click="changeTitle('前端程序员')">改标题</button><hr><div>{{ filterList }}</div><hr><!-- 访问模块中的state --><div>{{ user.userInfo.name }}</div><div>{{ setting.theme }}</div><hr><!-- 访问模块中的state --><div>user模块的数据:{{ userInfo }}</div><button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button><button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button><div>setting模块的数据:{{ theme }} - {{ desc }}</div><button @click="setTheme('skyblue')">更新主题</button><hr><!-- 访问模块中的getters --><div>{{ UpperCaseName }}</div></div>
</template><script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {name: 'Son2Com',computed: {// mapState 和 mapGetters 都是映射属性...mapState(['count', 'user', 'setting']),...mapState('user', ['userInfo']),...mapState('setting', ['theme', 'desc']),...mapGetters(['filterList']),...mapGetters('user', ['UpperCaseName'])},methods: {// mapMutations 和 mapActions 都是映射方法// 全局级别的映射...mapMutations(['subCount', 'changeTitle']),...mapActions(['changeCountAction']),// 分模块的映射...mapMutations('setting', ['setTheme']),...mapMutations('user', ['setUser']),...mapActions('user', ['setUserSecond'])// handleSub (n) {//   this.subCount(n)// }}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

store/index.js

// 这里面存放的就是 vuex 相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'// 插件安装
Vue.use(Vuex)// 创建仓库
const store = new Vuex.Store({// 严格模式 (有利于初学者,检测不规范的代码 => 上线时需要关闭)strict: true,// 1. 通过 state 可以提供数据 (所有组件共享的数据)state: {title: '仓库大标题',count: 100,list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数,第一个参数,都是 state// 注意点:mutation参数有且只能有一个,如果需要多个参数,包装成一个对象addCount (state, obj) {console.log(obj)// 修改数据state.count += obj.count},subCount (state, n) {state.count -= n},changeCount (state, newCount) {state.count = newCount},changeTitle (state, newTitle) {state.title = newTitle}},// 3. actions 处理异步// 注意:不能直接操作 state,操作 state,还是需要 commit mutationactions: {// context 上下文 (此处未分模块,可以当成store仓库)// context.commit('mutation名字', 额外参数)changeCountAction (context, num) {// 这里是setTimeout模拟异步,以后大部分场景是发请求setTimeout(() => {context.commit('changeCount', num)}, 1000)}},// 4. getters 类似于计算属性getters: {// 注意点:// 1. 形参第一个参数,就是state// 2. 必须有返回值,返回值就是getters的值filterList (state) {return state.list.filter(item => item > 5)}},// 5. modules 模块modules: {user,setting}
})// 导出给main.js使用
export default store

App.vue

<template><div id="app"><h1>根组件- {{ title }}- {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'
// console.log(mapState(['count', 'title']))export default {name: 'app',created () {// console.log(this.$router) // 没配console.log(this.$store.state.count)},computed: {...mapState(['count', 'title'])},data: function () {return {}},methods: {handleInput (e) {// 1. 实时获取输入框的值const num = +e.target.value// 2. 提交mutation,调用mutation函数this.$store.commit('changeCount', num)}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

store/index.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

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

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

相关文章

C# 界面控件中英切换

编程软件:VS 2015 需求:界面有两个按钮&#xff0c;点击可以将界面上所有控件进行不同语言的切换。 一共两种方案&#xff0c;个人认为第二种方案使用范围更广&#xff08;这里以中英文切换为例&#xff09;。 方案一:如图所示&#xff0c;建立两个资源文件 将所需控件的中英…

海思SS928(SD3403)部署YOLOv5-YOLOv7步骤详解

1. YOLO模型资料 本文档内容以yolov5-7.0工程、yolov5s模型为例。 a. 模型结构 详细的模型结构可以利用netron工具打开.pt或.onnx模型查看。 b. 模型参数即验证结果 其中,YOLOv5n、YOLOv5s、YOLOv5m、YOLOv5l、YOLOv5x为五种类型的预训练模型,其包含的检测类别相…

2024 cicsn ezbuf

文章目录 参考protobuf逆向学习复原结构思路exp 参考 https://www.y4ng.cn/posts/pwn/protobuf/#ciscn-2024-ezbuf protobuf 当时压根不知道用了protobuf这个玩意&#xff0c;提取工具也没提取出来&#xff0c;还是做题做太少了&#xff0c;很多关键性的结构都没看出来是pro…

Unity 集成 FMOD 音频管理插件 2.02

Unity 集成 FMOD 音频管理插件 2.02 3. 集成教程&#xff1a;3.1 设置Unity项目3.2 设置FMOD项目3.3 设置 FMOD for Unity3.4 添加声音&#xff1a;卡丁车引擎3.5 添加声音&#xff1a;氛围3.6 添加声音&#xff1a;音乐3.7 删除现有音频3.8 下一步 10. 脚本 API 参考10.1 基础…

Java锁的四种状态(无锁、偏向级锁、轻量级锁、重量级锁)

介绍 首先&#xff0c;我们需要明确一点&#xff1a;偏向级锁、轻量级锁、重量级锁只针对synchronized 锁的状态总共有四种&#xff0c;级别由低到高依次为&#xff1a;无锁、偏向锁、轻量级锁、重量级锁。 这四种锁状态分别代表什么&#xff0c;为什么会有锁升级&#xff…

在UI界面中实现3d人物展示

简要原理(设置双摄像机): 为需要展示的3D人物单独设置一个摄像机(只设置为渲染人物层级),主要摄像机的方向与人物方向一致,但摄像机需要需要旋转180,设置的角度自行进行微调创建一个Render Texture类型的组件用于存储摄像机渲染的内容UI上设置需要展示的图片区域,图片…

遍历目录

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 遍历在汉语中的意思是全部走遍&#xff0c;到处周游。在Python中&#xff0c;遍历是将指定的目录下的全部目录&#xff08;包括子目录&#xff09;及…

聪明人社交的基本顺序:千万别搞反了,越早明白越好

聪明人社交的基本顺序&#xff1a;千万别搞反了&#xff0c;越早明白越好 国学文化 德鲁克博雅管理 2024-03-27 17:00 作者&#xff1a;方小格 来源&#xff1a;国学文化&#xff08;gxwh001&#xff09; 导语 比一个好的圈子更重要的&#xff0c;是自己优质的能力。 唐诗宋…

AH股高开低走,创业板跌超2%,宁德时代下挫6%,微盘股指数反弹超5%

创业板跌2%&#xff0c;权重股宁德时代跌近6%&#xff1b;地产、光刻机概念股逆势大涨&#xff1b;券商股午后集体下跌&#xff0c;天风证券一度跌停。微盘股指数经历连跌后早盘反弹超5%。 内容提要 周五&#xff0c;A股高开后回落&#xff0c;午盘震荡回升。截至收盘&#x…

Python可视化 | 使用matplotlib绘制面积图示例

面积图是数据可视化中的一个有效工具&#xff0c;用于说明时间上的关系和趋势。它们提供了一种全面的、视觉上迷人的方法&#xff0c;通过熟练地将折线图的可读性与填充区域的吸引力相结合来呈现数值数据。 在本文中&#xff0c;我们将学习更多关于在Python中创建面积折线图的…

【python】python指南(二):命令行参数解析器ArgumentParser

一、引言 对于算法工程师来说&#xff0c;语言从来都不是关键&#xff0c;关键是快速学习以及解决问题的能力。大学的时候参加ACM/ICPC一直使用的是C语言&#xff0c;实习的时候做一个算法策略后台用的是php&#xff0c;毕业后做策略算法开发&#xff0c;因为要用spark&#x…

24考研408大变化,25考研高分上岸规划+应对策略

巧了&#xff0c;我有现成的经验&#xff1a; 数学和专业课的成绩都不高不低&#xff0c;刚好够用&#xff0c;其实408想上岸&#xff0c;不仅仅要学好408&#xff0c;还要学好考研数学&#xff0c;这是我的肺腑之言&#xff0c;我复试的时候&#xff0c;我知道的那些没有进复试…

高通SDX12:Voice Over USB 功能调试

一、功能概述及使用环境 Linux PC 作为上位机,内置 SLIC基于高通 SDX12 平台的设备作为从设备,通过USB连接到 Linux PC 上,在 PC 上枚举 UAC 设备从设备进行 MO/MT Call 时,上位机使用 arecord 进行录音,音频数据通过 USB 传至上位机,上位机停止录音后再使用 aplay 进行播…

vue element 接口返回数据与控制台打印数据不一致 踩坑

问题描述&#xff1a; 接口返回数据正常&#xff0c;&#xff0c;控制台打印不对&#xff0c;element el-switch表格中使用&#xff0c;控制台打印数据被改变 如下正常数据 数据id 17状态是0 控制台打印状态却是1 造成原因&#xff1a; element el-seitch组件修改了状态 修…

解决方案:昇腾aarch64服务器安装CUDA+GCC+CMake,编译安装Pytorch,华为昇腾HPC服务器深度学习环境安装全流程

目录 一、安装CUDA和cudnn1.1、下载CUDA驱动1.2、安装CUDA驱动1.3、配置环境变量1.4、安装cudnn1.5、安装magma-cuda 二、安装gcc编译器三、安装CMake四、安装NCCL五、编译安装Pytorch5.1、前提准备5.2、下载pytorch源码5.3、配置环境变量5.4、Pytorch编译安装5.5、测试Pytorch…

Python教程:Python操作MySQL基础使用

8、Python操作MySQL基础使用 8.1 安装pymysql pip install pymysql8.2 测试连接 测试代码 from pymysql import Connection# 获取到MySQL数据库的链接对象 conn Connection(# 主机名hostlocalhost,# 端口号,默认3306port3306,# 账户名userroot,# 密码password3535 )# 打印…

日志分析集群最新版

日志分析集群-8版本 作者&#xff1a;行癫&#xff08;盗版必究&#xff09; 第一部分&#xff1a;Elasticsearch 一&#xff1a;环境准备 1.简介 ​ 部署模式&#xff1a;es集群采用无主模式 ​ es版本&#xff1a;8.13.4 ​ jdk版本&#xff1a;使用es内嵌的jdk21&#x…

GAT1399协议分析(10)--单图像删除

一、官方接口 由于批量删除的接口&#xff0c;图像只能单独删除。 二、wireshark实例 这个接口比较简单&#xff0c;调用request delete即可 文本化&#xff1a; DELETE /VIID/Images/34078100001190001002012024060513561300065 HTTP/1.1 Host: 10.0.201.56:31400 User-Age…

【sklearn】【逻辑回归1】

学习笔记来自&#xff1a; 所用的库和版本大家参考&#xff1a; Python 3.7.1Scikit-learn 0.20.1 Numpy 1.15.4, Pandas 0.23.4, Matplotlib 3.0.2, SciPy 1.1.0 1 概述 1.1 名为“回归”的分类器 在过去的四周中&#xff0c;我们接触了不少带“回归”二字的算法&#xf…

【Vue】练习-Vuex中的值和组件中的input双向绑定

目标 实时输入&#xff0c;实时更新&#xff0c;巩固 mutations 传参语法 实现步骤 代码示例 App.vue <input :value"count" input"handleInput" type"text"> <script>export default {methods: {handleInput (e) {// 1. 实时获取…