更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
//type:increment

//提交motations:
store.commit('increment') //向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):
store.commit('increment', { amount: 10 }) //对象风格的提交方式
store.commit({ type: 'increment', amount: 10 })

Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项

,提前在你的 store 中初始化好所有所需属性
,在对象上添加新属性
Vue.set(obj, 'newProp', )
//新对象替换方式
state.obj = { ...state.obj, newProp: } //mutation必须是同步函数
//任何在回调函数中进行的状态的改变都是不可追踪的。

使用常量作为mutation的事件类型

//常量放在单独的文件中
// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({
state: { ... },
mutations: {
//使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})

在组件中提交mutation

//可以用this.$store.commit("***");
//可以用mapMutations将组件中的 methods 映射为 store.commit 调用 import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
// `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})
}
}

vuex-Mutation(同步)的更多相关文章

  1. vuex mutation,action理解

    1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...

  2. Vuex的同步异步存值取值

    1. vue中各个组件之间传值 1.父子组件 父组件-->子组件,通过子组件的自定义属性:props 子组件-->父组件,通过自定义事件:this.$emit('事件名',参数1,参数2, ...

  3. vuex 源码解析(四) mutation 详解

    mutation是更改Vuex的store中的状态的唯一方法,mutation类似于事件注册,每个mutation都可以带两个参数,如下: state ;当前命名空间对应的state payload ...

  4. Vuex源码解析

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  5. Vuex实现原理解析

    我们在使用Vue.js开发复杂的应用时,经常会遇到多个组件共享同一个状态,亦或是多个组件会去更新同一个状态,在应用代码量较少的时候,我们可以组件间通信去维护修改数据,或者是通过事件总线来进行数据的传递 ...

  6. Vuex 入门指南

    1.Vuex是什么? 我们还是像以往一样先看一看官方文档对此的解读(Vuex 是什么? · GitBook) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的 ...

  7. vuex源码分析3.0.1(原创)

    前言 chapter1 store构造函数 1.constructor 2.get state和set state 3.commit 4.dispatch 5.subscribe和subscribeA ...

  8. Vuex、Flux、Redux、Redux-saga、Dva、MobX

    https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...

  9. vuex简单示例

    一.vuex是什么,解决了什么问题? 官方解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生 ...

  10. vue组件通信传值——Vuex

    一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...

随机推荐

  1. CentOS 7 MariaDB-MMM

    MariaDB-MMM高可用群集 1.MySQL-MMM概述 MMM(Master-Master replication manager for MySQL)是一套支持双主故障切换和双主日常管理的脚本 ...

  2. 论文阅读(XiangBai——【AAAI2017】TextBoxes_A Fast Text Detector with a Single Deep Neural Network)

    XiangBai——[AAAI2017]TextBoxes:A Fast Text Detector with a Single Deep Neural Network 目录 作者和相关链接 方法概括 ...

  3. angular中的MVC思想

    MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳.在学习angular的过程中,我在网上查找关于angular MVC ...

  4. Netty原理分析

    Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用 ...

  5. SolrJ的入门

    什么是SolrJ? solrj是访问solr服务的java客户端,提供索引和搜索的请求方法, SolrJ和图形界面操作的区别就类似于数据库中使用jdbc和mysql客户端的区别一样. 我在测试Solr ...

  6. css3 二维码 添加 扫描特效

    <section data-role="paragraph" class="_135editor" style="border: 0px non ...

  7. Shell 变量知识

    1.自定义变量:自定义变量不能以数字开头. ()root#a=’cd /etc/’ #设置自定义变量. root#etho $a #使用变量. 2.全局变量:export可设置全局变量不能以数字开头. ...

  8. Linux TCP并发请求溺出 调优

    TCP并发请求溺出 调优:系统开启某个监听端口后,当多个TCP请求连接监听端后,会把多个请求交给backlog的默认监听队列由socket server一并处理,backlog有自己的队列长度默认12 ...

  9. S-DES算法实现(C++版本)

    密码学实验二: /** :;LaEaHKEEGpPXU7;, .:75pKH11252U252XapZgRQgD6XJscLr;,. :LXpRgGaX521JLw1JswJJsJs22XHPPEZE ...

  10. 关于redis集群的问题no reachable node in cluster

    重新启动redis集群时启动失败 n context with path [] threw exception [Request processing failed; nested exception ...