第四十二章 Vue中使用mutations修改Vuex仓库数据

目录

一、mutations修改仓库数据

1.1. 概述

1.2. mutations修改数据基本步骤

1.3. 完整代码

1.3.1. main.js

1.3.2. App.vue

1.3.3. index.js

1.3.4. Son1.vue

1.3.5. Son2.vue

二、mutations传参语法

2.1. mutations传参基本步骤

2.2. 完整代码

2.2.1. index.js

2.2.2. Son1.vue

三、输入框和Store仓库数据双向绑定

 1.3.1. main.js

1.3.2. App.vue

1.3.3. index.js

1.3.4. Son1.vue

1.3.5. Son2.vue

一、mutations修改仓库数据

1.1. 概述

在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。

this.$store.state.count++ (错误写法)

在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。 (state数据的修改只能通过mutations )

1.2. mutations修改数据基本步骤

1. 定义 mutations 对象，对象中存放修改 state 的方法

2. 组件中提交调用 mutations

1.3. 完整代码

1.3.1. main.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')

1.3.2. App.vue

<template><div id="app"><h1>根组件 - {{ title }} - {{ count }}</h1><input 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'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>

1.3.3. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state) {// 修改数据state.count += 1},addFive (state) {state.count += 5},changeTitle (state) {state.title = '小标题'}}
})// 导出给main.js使用
export default store

1.3.4. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值：<label>{{ $store.state.count }}</label><br><button @click="handleAdd">值 + 1</button><button @click="addFive">值 + 5</button><button @click="changeTitle">改标题</button></div>
</template><script>
export default {name: 'Son1Com',methods: {handleAdd () {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount')},addFive () {this.$store.commit('addFive')},changeTitle () {this.$store.commit('changeTitle')}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

1.3.5. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

二、mutations传参语法

2.1. mutations传参基本步骤

提交mutation还可以传递参数  `this.$store.commit( 'xxx', 参数 )`

1. 提供 mutation 函数 (带参数 - 提交载荷 payload )

2. 页面中提交调用 mutation

注：提交参数只能一个，如果有多个参数，需要将该参数包装成一个对象传递

2.2. 完整代码

2.2.1. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle}}
})// 导出给main.js使用
export default store

2.2.2. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</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="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="changeTitle">改标题</button></div>
</template><script>
export default {name: 'Son1Com',methods: {handleAdd (n) {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},handleSub (n) {this.$store.commit('subCount', n)},changeTitle () {this.$store.commit('changeTitle', { name: '王哲晓', newTitle: '2024加油，迎接新的开始，新的起点，新的人生' })}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

三、输入框和Store仓库数据双向绑定

 1.3.1. main.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')

1.3.2. 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'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},methods: {handleInput (e) {// 1.实时获取输入框的值const num = e.target.value// 2.提交mutation，调用mutation函数this.$store.commit('changeCount', num)}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>

1.3.3. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle},changeCount (state, newCount) {state.count = newCount}}
})// 导出给main.js使用
export default store

1.3.4. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</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="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="changeTitle">改标题</button></div>
</template><script>
export default {name: 'Son1Com',methods: {handleAdd (n) {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},handleSub (n) {this.$store.commit('subCount', n)},changeTitle () {this.$store.commit('changeTitle', { name: '王哲晓', newTitle: '2024加油，迎接新的开始，新的起点，新的人生' })}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

1.3.5. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

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

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

相关文章

六通道CAN集线器

六通道CAN集线器

六通道CAN集线器 --SG-CanHub-600 功能概述 SG_CanHub_600是一款具有六路通道的工业级智能 CAN数字隔离中继集线器。 SG_CanHub_600能够实现信号再生、延长通信距离、提高总线负载能力、匹配不同速 率 CAN网络&#xff0c;同时强大的 ID过滤功能可以极大降低 CAN总线负荷&a…
阅读更多...
学校服务器连接pycharm配置2

学校服务器连接pycharm配置2

上一个可能还是有点问题&#xff0c;因为实际在跑的时候读取的其实是本地的anaconda&#xff0c;这个重新整了一下流程 首先在学校服务器先激活自己创建的虚拟环境&#xff0c;这里就不截图了 然后在pycharm里面打开设置 选择这个python解释器 这里有添加解释器 选择SSH …
阅读更多...
LeetCode面试经典150题|228.汇总区间

LeetCode面试经典150题|228.汇总区间

给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范围 [a,b] 应该按…
阅读更多...
excel-VLOOKUP函数使用/XVLOOKUP使用

excel-VLOOKUP函数使用/XVLOOKUP使用

多个窗口同时编辑表格&#xff0c;方便对照操作 使用开始-视图-新建窗口 将战区信息表的三列数据匹配到成交数据表上 可以使用VLOOKUP函数 有4个参数&#xff08;必须要查找的值&#xff0c; 要查找的区域&#xff0c;要返回区域的第几列数据&#xff0c;一个可选参数查找匹…
阅读更多...
kafka和Flume的整合

kafka和Flume的整合

目录 一、Kafka作为Source 【数据进入到kafka中&#xff0c;抽取出来】 1、在我的flume的conf文件夹下&#xff0c;有个myconf文件夹&#xff1a; 2、 创建一个flume脚本文件&#xff1a; kafka-memory-logger.conf 3、测试 二、kafka作为Sink 【数据从别的地方抽取到kafka里…
阅读更多...
Jmeter基础篇（22）服务器性能监测工具Nmon的使用

Jmeter基础篇（22）服务器性能监测工具Nmon的使用

一、前言 我们在日常做压测的过程中&#xff0c;不仅仅需要监控TPS&#xff0c;响应时间&#xff0c;报错率等这些系统基础性能数据&#xff0c;还需要对服务器的性能&#xff08;如CPU、磁盘、内存、网络IO等&#xff09;做监控&#xff0c;以求对系统运行过程中的硬件性能有…
阅读更多...
【c++笔试强训】（第六篇）

【c++笔试强训】（第六篇）

目录 单词搜索&#xff08;搜索&#xff09; 题目解析 讲解算法原理 编写代码 杨辉三⻆&#xff08;动态规划&#xff09; 题目解析 讲解算法原理 编写代码 单词搜索&#xff08;搜索&#xff09; 题目解析 1.题目链接&#xff1a;单词搜索_牛客题霸_牛客网 2.题目描…
阅读更多...
【含开题报告+文档+PPT+源码】基于SpringBoot的奶茶点单系统

【含开题报告+文档+PPT+源码】基于SpringBoot的奶茶点单系统

开题报告 随着社会经济的发展和人们对生活质量的需求提升&#xff0c;奶茶行业迅速崛起&#xff0c;并成为人们生活不可或缺的一部分。消费者在奶茶店点单通常需要排队等候、填写纸质订单&#xff0c;给消费者和奶茶店带来了一定的不便。因此&#xff0c;设计和实现一个基于 S…
阅读更多...
【Android、IOS、Flutter、鸿蒙、ReactNative 】约束布局

【Android、IOS、Flutter、鸿蒙、ReactNative 】约束布局

Android XML 约束布局 参考 TextView居中 TextView 垂直居中并且靠右 TextView 宽高设置百分比 宽和高的比例 app:layout_constraintDimensionRatio"h,2:1" 表示子视图的宽高比为2:1&#xff0c;其中 h表示保持宽度不变&#xff0c;高度自动调整。 最大宽度 设…
阅读更多...
Android 下内联汇编，Android Studio 汇编开发

Android 下内联汇编，Android Studio 汇编开发

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 内联汇编 Android 内联汇编非常适用于 ARM 架构的性能优化和底层操作&#xff0c;通常用于加密、解密、特定指令优化等领域。 1. 基础语法 内联汇编在 C/C …
阅读更多...
安装宝塔 Windows 面板

安装宝塔 Windows 面板

操作场景 宝塔面板是一款使用很方便、功能强大、交互友好且终身免费的服务器管理软件&#xff0c;支持 Linux 与 Windows 系统。在宝塔面板中&#xff0c;您可以一键配置 LAMP、LNMP、网站、数据库、FTP、SSL&#xff0c;还可以通过 Web 端轻松管理服务器。 本文介绍如何在 W…
阅读更多...
Ubuntu 的 ROS 操作系统 turtlebot3 gazebo仿真

Ubuntu 的 ROS 操作系统 turtlebot3 gazebo仿真

引言 TurtleBot3 Gazebo仿真环境是一个非常强大的工具&#xff0c;能够帮助开发者在虚拟环境中测试和验证机器人算法。 Gazebo是一个开源的3D机器人仿真平台&#xff0c;它能支持物理引擎&#xff0c;允许机器人在虚拟环境中模拟和测试。结合ROS&#xff0c;它能提供一个完整的…
阅读更多...
「IDE」集成开发环境专栏目录大纲

「IDE」集成开发环境专栏目录大纲

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「IDE」集成开发环境&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定…
阅读更多...
Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)

Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)

作者&#xff1a;来自 Elastic Benjamin Trent Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)。 嵌入模型输出 float32 向量&#xff0c;通常对于高效处理和实际应用来说太大。Elasticsearch 支持 int8 标量量化&#xff0c;以减小向量大小&#xff0c;同时保持性能。其他…
阅读更多...
Odoo:免费开源的钢铁冶金行业ERP管理系统

Odoo:免费开源的钢铁冶金行业ERP管理系统

文 / 开源智造 Odoo亚太金牌服务 简介 Odoo免费开源ERP集成计质量设备大宗原料采购&#xff0c;备件设材全生命周期&#xff0c;多业务模式货控销售&#xff0c;全要素追溯单品&#xff0c;无人值守计量物流&#xff0c;大宗贸易交易和精细化成本管理等方案&#xff1b;覆盖…
阅读更多...
Linux设置socks代理

Linux设置socks代理

公司里绝大多数主机已经禁止外网访问&#xff0c;仅保留一台主机设置socks作为代理服务器。如下为对socks这一概念的学习整理 什么是socks 是一种OSI模型下会话层的协议&#xff0c;位于表示层与传输层之间&#xff0c;作用是&#xff1a; exchanges network packets between…
阅读更多...
MySQL数据库：SQL语言入门 （学习笔记）

MySQL数据库：SQL语言入门 （学习笔记）

SQL&#xff08;Structured Query Language&#xff09;是结构化查询语言的简称&#xff0c;它是一种数据库查询和程序设计语言&#xff0c;同时也是目前使用最广泛的关系型数据库操作语言。&#xff08;95%适用于所有关系型数据库&#xff09; 【 SQL是关系型数据库通用的操作…
阅读更多...
视频会议接入GB28181视频指挥调度，语音对讲方案

视频会议接入GB28181视频指挥调度，语音对讲方案

传统的视频会议指挥调度系统目前主流的互联网会议大部分都是私有协议&#xff0c;功能都很独立。目前主流的视频监控国标都最GB平台&#xff0c;新的需求要求融合平台要接入监控等设备&#xff0c;并能实现观看监控接入会议&#xff0c;实时语音设备指挥现场工作人员办公实施。…
阅读更多...
萤石设备视频接入平台EasyCVR海康私有化视频平台监控硬盘和普通硬盘有何区别？

萤石设备视频接入平台EasyCVR海康私有化视频平台监控硬盘和普通硬盘有何区别？

在现代安防监控领域&#xff0c;对于数据存储和视频处理的需求日益增长&#xff0c;特别是在需要长时间、高稳定性监控的环境中&#xff0c;选择合适的存储设备和监控系统显得尤为重要。本文将深入探讨监控硬盘与普通硬盘的区别&#xff0c;并详细介绍海康私有化视频平台EasyCV…
阅读更多...
一学就废|Python基础碎片，字符串编码

一学就废|Python基础碎片，字符串编码

Unicode 万国码 在 Python 3 中&#xff0c;字符串由 Unicode 表示&#xff0c;而不是字节。ASCII 码是定义字符数字代码的最著名的标准。数字值最初只定义 128 个字符&#xff0c;因此 ASCII 只包含控制代码、数字、小写字母、大写字母等。然而&#xff0c;我们不足以表示世界…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023