VUEX 使用学习三 : mutations
转载请注明出处:
在 Vuex 中 store 数据改变的唯一方法就是提交 mutations
。mutations
里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations
里面,使得数据和视图分离。
通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
示例:
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
// 事件类型 type 为 increment
increment (state) {
// 变更状态
state.count++
}
}
})
第一种使用方式:
this.$store.commit() 是触发mutations的第一种方式,
示例:
// 方法
mutations:{
// 加的方法
increment(state,addcounter){
state.counter += addcounter
},
// 减的方法
decrement(state,subcounter){
state.counter -= subcounter
}
},
使用:
<template>
<div>
<h2>Vuex第四个页面</h2>
<button @click="addnum(5)">+</button>
<button @click="subnum(5)">-</button>
<p>{{$store.state.counter}}</p>
</div>
</template> <script>
export default {
name: "Vuexfour",
methods:{
addnum(addcounter){
this.$store.commit("increment",addcounter)
},
subnum(subcounter){
this.$store.commit("decrement",subcounter)
}
}
}
</script>
第二种方式 mapMutations
通过以函数映射的方式
1.从vuex中按需求导入mapMutations 函数
import {mapMutations} from 'vuex'
通过刚才导入的mapMutations函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
2. 将指定的mutations函数,映射为当前组件的methods函数
methods:{ ...mapMutations(['add']) }
示例:
<script>
import { mapMutations } from 'vuex'
export default {
computed:{
count(){
return this.$store.state.count
}
},
methods:{
...mapMutations([//采用解构的方式引入
'increment',
'decrement'
])
}
}
</script>
VUEX 使用学习三 : mutations的更多相关文章
- vuex的学习笔记
什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- HTTP学习三:HTTPS
HTTP学习三:HTTPS 1 HTTP安全问题 HTTP1.0/1.1在网络中是明文传输的,因此会被黑客进行攻击. 1.1 窃取数据 因为HTTP1.0/1.1是明文的,黑客很容易获得用户的重要数据 ...
- TweenMax动画库学习(三)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) ...
- Struts2框架学习(三) 数据处理
Struts2框架学习(三) 数据处理 Struts2框架框架使用OGNL语言和值栈技术实现数据的流转处理. 值栈就相当于一个容器,用来存放数据,而OGNL是一种快速查询数据的语言. 值栈:Value ...
- 4.机器学习——统计学习三要素与最大似然估计、最大后验概率估计及L1、L2正则化
1.前言 之前我一直对于“最大似然估计”犯迷糊,今天在看了陶轻松.忆臻.nebulaf91等人的博客以及李航老师的<统计学习方法>后,豁然开朗,于是在此记下一些心得体会. “最大似然估计” ...
- DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件 本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...
- [ZZ] 深度学习三巨头之一来清华演讲了,你只需要知道这7点
深度学习三巨头之一来清华演讲了,你只需要知道这7点 http://wemedia.ifeng.com/10939074/wemedia.shtml Yann LeCun还提到了一项FAIR开发的,用于 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- Android JNI学习(三)——Java与Native相互调用
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
随机推荐
- 动词时态=>3.现在时态和过去时态构成详解
现在时态构成详解 一般现在时态 最容易构成的时态,直接加动词原形(字典当中显示的词条)就可以 第三人称"单数"的话需要加s 这是最容易出错的时态:容易将 现在的时间,和一般的状态: ...
- grpc错误处理
0.1.索引 https://waterflow.link/articles/1665938704477 我们都知道当发起http请求的时候,服务端会返回一些http状态码,不管是成功还是失败.客户端 ...
- Ubuntu安装Docker及镜像加速器
一.安装Docker sudo apt-get update && sudo apt-get install -y apt-transport-https ca-certificate ...
- JS逆向实战1——某省阳光采购服务平台
分析 其实这个网站基本没有用到过什么逆向,就是简单的图片base64加密 然后把连接变成2进制存成文件 然后用ocr去识别即可 !! 注意 在获取图片连接 和对列表页发起请求时一定要用一个请求,也就是 ...
- 现代 CSS 指南 -- at-rule 规则扫盲
大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...
- ES6 学习笔记(五)基本类型Boolean
Boolean 1.需要注意的地方: 取值:true false 对于值为空字符串,0,-0,NaN,Null,undefined,false的布尔对象,它都会有一个初始值false.对于其它的值如& ...
- 万字详解JVM,让你一文吃透
摘要:本文将带大家详细地了解关于JVM的一些知识点. 本文分享自华为云社区<[JVM]关于JVM,你需要掌握这些 | 一文彻底吃透JVM系列>,作者: 冰 河 . JDK 是什么? JDK ...
- Vue实现离开页面二次确认
在项目开发中遇到用户编辑内容后未保存推出编辑页面时需要提示用户"当前数据未保存,是否退出",实际开发中利用window.onbeforeunload方法与vue.$on方法在upd ...
- 关于ASP.NET Core WebSocket实现集群的思考
前言 提到WebSocket相信大家都听说过,它的初衷是为了解决客户端浏览器与服务端进行双向通信,是在单个TCP连接上进行全双工通讯的协议.在没有WebSocket之前只能通过浏览器到服务端的请求应答 ...
- orcle恢复报错:ORA-00392: 日志 2 (用于线程 1) 正被清除, 不允许操作
遇到问题 RMAN> alter database open resetlogs; RMAN-00571: =========================================== ...