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 ...
随机推荐
- 「MySQL高级篇」MySQL索引原理,设计原则
大家好,我是melo,一名大二后台练习生,大年初三,我又来充当反内卷第一人了!!! 专栏引言 MySQL,一个熟悉又陌生的名词,早在学习Javaweb的时候,我们就用到了MySQL数据库,在那个阶段, ...
- python简单的tcp服务端
1 #!/usr/bin/python 2 # -*- coding: UTF-8 -*- 3 # 文件名:tcpserver.py 4 5 import socket 6 import time 7 ...
- 前后端分离项目(十):实现"改"功能(前后端)
好家伙,本篇介绍如何实现"改" 我们先来看看效果吧 (这可不是假数据哟,这是真数据哟) (忘记录鼠标了,这里是点了一下刷新) First Of All 我们依旧先来理一下思路: ...
- 51单片机-独立按键控制led矩阵的左移和右移
51单片机学习 独立按键 控制led灯光矩阵的左移和右移 开发板采用的是普中的A2学习开发板,具体的代码如下: typedef unsigned int u16; void delay(u16 tim ...
- 检测轮廓 获取其最值的坐标 opencv-python
一.基础知识 图像清晰度评价算法有多种 空域中,主要考察图像的邻域对比度,即相邻像素间灰度特征的 梯度差: 频域中,主要考察图像的频率分量,清晰的图像高频分量多,模糊的图像低频分量多. 灰度值 把白色 ...
- 嵌入式-C语言基础:指针是存放变量的地址,那为什么要区分类型?
指针是存放变量的地址,那为什么要区分类型?不能所有类型的变量都用一个类型吗?下面用一个例子来说明这个问题. #include<stdio.h> int main() { int a=0x1 ...
- 微信小程序的学习(一)
一.小程序简介 1.小程序与普通网页开发的区别 运行环境不同 网页运行在浏览器环境中 小程序运行在微信环境中 API不同 小程序无法调用浏览器中的DOM和BOM的API 但是小程序可以调用微信环境提供 ...
- Inventor 2021保姆级安装教程
Inventor 2021 WIN10 64位安装步骤: 1.先使用"百度网盘客户端"下载INT21_CN_x64安装包到电脑磁盘里,并鼠标右击进行解压缩,安装前先断网,然后找到I ...
- 《Hierarchical Text-Conditional Image Generation with CLIP Latents》阅读笔记
概括 模型总述 本篇论文主要介绍DALL·E 2模型,它是OpenAI在2022年4月推出的一款模型,OpenAI在2021年1月推出了DALL·E模型,2021年年底推出了GLIDE模型. DALL ...
- devexpress 中advBandedGridView内容自动换行和调整自适应行高
首先是自动换行,可以创建一个repositoryItemMemoEdit 并绑定到需要换行的列中 再设置一下repositoryItemMemoEdit高度自适应,这样子就完成了自动换行了 repos ...