vue-vuex中使用commit提交mutation来修改state的方法详解

在vuex中，关于修改state的方式，需要commit提交mutation。官方文档中有这么一句话：

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

为了搞清楚其原因，查阅了很多资料，发现其它人在做vuex的源码解析的时候，并没有将这点说的很明白。

所以只好自己去查看vuex的源码，并且自己做demo进行验证。

但是试验后，发现直接修改state时，store中的state能够改变，并且是响应式的，并没有报错。跟commit提交mutation的方式没啥区别。

后来在github上遇到一位朋友，提醒试试严格模式下会发生什么。

一、两种修改state方式的区别

在vuex官方文档上看到了关于严格模式的描述：

开启严格模式，仅需在创建 store 的时候传入 strict: true；

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

于是，将vuex设置成了严格模式。

直接修改state发现控制台确实是报出了错误，但是state修改成功，并且依然是响应式的。

错误提示：

Do not mutate vuex store state outside mutation handlers.

通过commit 提交 mutation 的方式来修改 state 时，vue的调试工具能够记录每一次state的变化，这样方便调试。但是如果是直接修改state，则没有这个记录。

commit修改state源码分析

以上已经讨论了在严格模式下，直接修改state会造成报错。接下来通过分析源码来一探究竟。

首先应该分析commit函数的代码，因为mutation是通过commit函数来执行的。

在commit函数内部，由this._commit()函数来修改state。那么 _withCommit 又是什么呢，接着看 _withCommit 的代码：

_withCommit 函数的参数 fn 就是修改state的函数。在执行 fn() 之前，会将 this._committing 设置为 true。等到fn()执行完毕后，又将 this._committing 的值进行恢复。那么为什么要将 this._withCommitting设置为true，其作用到底是什么。在vuex/src/store.js 的开头发现了判断严格模式的代码：

这三行代码很简单：当 vuex设置为严格模式的时候，就会执行 enableStrictMode 函数。那么 enableStrictMode 又是什么鬼？

在 enableStrictMode 函数内部，调用了 $watch 函数来观察 state的变化。当state变化时，就会调用 assert 函数，判断 store._committing（即 上文的 this._committing） 的值，如果不为 true，就会报出异常：

Do not mutate vuex store state outside mutation handlers.

所以，如果通过外部直接修改state，则没有执行 commit 函数，也就没有执行 _withCommit 函数，进而 this._withCommitting 的值 不为 true，故当执行 enableStrictMode 时，则会执行 assert 函数，因为_withCommitting不为true，则报出异常了。

结语

综上所述，在vuex中，最好设置成严格模式，并且按照文档的要求，通过commit提交mutation的方式来修改state，而不要直接修改state。不然，控制台会报错，并且vue调试工具不会记录state的变化，无法调试。

以上这篇vue-vuex中使用commit提交mutation来修改state的方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

  • Vuex中的State使用介绍

    Vuex中的State使用介绍

    现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State. Vuex 使用单一状态树--是的,用一个对象就包含了全部的应用层级状态.至此它便作为一个"唯一数据源 (SSOT)"而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照. 单状态树和模块化并不冲突--在后面的章节里我们会讨论如何将状态和状态变

  • Vuejs监听vuex中值的变化的方法示例

    比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知. fruit-count-component.vue <template> <p>Fruits: {{ count }}</p> </template> <script> import basket from '../resources/fruit-basket' export default () { comput

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

  • 说说如何使用Vuex进行状态管理(小结)

    1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view).当通过 methods 中的方法更新数据时,视图也会自动更新. message.vue <template> <div> {{message}} <button @click="changeMessage">改变内容</button> </div> </template> <script> export default

  • 在vue中使用vuex,修改state的值示例

    1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 这个的功能是运用mutations 修改state中的值 以上这篇在vue中使用vuex,修改state的值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue-vuex中使用commit提交mutation来修改state的方法详解

    在vuex中,关于修改state的方式,需要commit提交mutation.官方文档中有这么一句话: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. 为了搞清楚其原因,查阅了很多资料,发现其它人在做vuex的源码解析的时候,并没有将这点说的很明白. 所以只好自己去查看vuex的源码,并且自己做demo进行验证. 但是试验后,发现直接修改state时,store中的state能够改变,并且是响应式的,并没有报错.跟commit提交mutation的方式没啥区别. 后

  • Vue.js中对css的操作（修改）具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解

    前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e

  • vue 父组件通过$refs获取子组件的值和方法详解

    前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式 今天我们要看的是父组件如何直接调

  • Javaweb中Request获取表单数据的四种方法详解

    Javaweb中Request获取表单数据的四种方法详解

    目录 表单代码 request.getParamter(String name);通过name获取值 request.getParamterValues(String name);通过name获取value值(一般用于复选框获取值) 代码片段 request.getParameterNames();直接获取表单所有对象的name值,返回值是枚举集合 request.getParameterMap();直接获取表单所有对象的name值以及数据 表单代码 <!DOCTYPE html> <h

  • 对python中词典的values值的修改或新增KEY详解

    在python中,对词典的值,可以新增,或者修改,如下: 以上这篇对python中词典的values值的修改或新增KEY详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 对DataFrame数据中的重复行,利用groupby累加合并的方法详解

    pandas读取一组数据,可能存在重复索引,虽然可以利用drop_duplicate直接删除,但是会删除重要信息. 比如同一ID用户,多次登录学习时间.要计算该用户总共''学习时间'',就要把重复的ID的''学习时间''累加. 可以结合groupby和sum函数完成该操作. 实例如下: 新建一个DataFrame,计算每个 id 的总共学习时间.其中 id 为one/two的存在重复学习时间.先利用 groupby 按照键 id 分组,然后利用sum()函数求和,即可得到每个id的总共学习时间.

  • 对Python中实现两个数的值交换的集中方法详解

    如下所示: #定义两个数并赋值 x = 1 y = 2 #第1种方式:引入第三方变量 z = 0 z = x x = y y = z #第2种:不引入第三方变量 x = x+y y = x-y x = x-y #第3种:推荐 x,y = y,x print("x=%d,y=%d"%(x,y)) 以上这篇对Python中实现两个数的值交换的集中方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 关于Python 中的时间处理包datetime和arrow的方法详解

    在获取贝壳分的时候用到了时间处理函数,想要获取上个月时间包括年.月.日等 # 方法一: today = datetime.date.today() # 1. 获取「今天」 first = today.replace(day=1) # 2. 获取当前月的第一天 last_month = first - datetime.timedelta(days=1) # 3. 减一天,得到上个月的最后一天 print(last_month.strftime("%Y%m")) # 4. 格式化成指定形

  • vue中组件之间相互通信传值的几种方法详解

    目录 vue中组件之间相互通讯传值的方式 1.子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现 2.父组件主动获取子组件数据 3.使用provide/inject方法实现 4.使用事件总线 5.vuex\localStorage\sessionStorage 总结 vue中组件之间相互通讯传值的方式 我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用. 我们在封装组件的时候经常会留有一些预留的接口,

随机推荐