vue报错:Error: [vuex] Do not mutate vuex store state outside mutation handlers.
报错原理解读
Error: [vuex] Do not mutate vuex store state outside mutation handlers.
该报错从文本意思理解还是很清晰的,不要在mutation函数外修改vuex中存储的值。
通常情况下,vuex挂载到vue上之后,vuex中的值可以在组件中修改
this.$store.state.count = 1
但我们不推荐这种做法,这是一种代码规范,建议不要在mutation函数外修改state的值,避免不必要的参数混乱。
至于要不要遵循这种规范,完全取决于你。vuex也很贴心的提供了严格模式,来控制是否提示不规范的store值修改。参考代码:
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import defaultState from './state'
import mutations from './mutations'Vue.use(Vuex) // 将Vuex挂载到Vueconst debug = process.env.NODE_ENV !== 'production'export default () => {return new Vuex.Store({strict: debug, // 严格模式,是否能在mutation外修改state值,true → 不能修改,false → 可以修改actions,getters,state: defaultState,mutations})
}
注意:开启了严格模式之后,若在mutation外修改值,也能动态渲染到页面上,只是vue会有警告提示,类似于这样:
试错案例分析
出现这个Vuex报错,通常是显性的(真的在组件中调用了this.$store.state,并且对其进行了改变),以下介绍一种自己犯错遇到的不易察觉的出错方式。
项目需要使用了vux(一个Vue的移动端组件库)中的toast组件,看官网参数如下:
vux官网:https://doc.vux.li/zh-CN/components/toast.html
toast组件文档:
浏览文档之后,一顿操作,看到文档中写着“使用v-model绑定”,就把代码写成了这样:
// 组件中使用toast
<template><div><button @click="showToast">点我显示toast</button><vux-toast v-model="vuxToast.value" :position="vuxToast.position" :type="vuxToast.type" :text="vuxToast.text"></vux-toast></div>
</template><script type="text/ecmascript-6">
import { mapState, mapMutations } from 'vuex'
export default {computed: {...mapState(['vuxToast'])},method: {...mapMutations(['updataVuxToast']),showToast {this.updataVuxToast({value: true, text: '显示toast'})}}
}
</script>
// state.js
export default {vuxToast: {position: 'middle',type: 'text',value: false,text: ''}
}
// mutations.js
export default {updataVuxToast (state, props) {const vuxToast = Object.assign({}, state.vuxToast, props)state.vuxToast = vuxToast}
}
是不是看着完全没问题?并没有在组件中直接修改vuex中的值。运行之后,toast提示正常显示,2秒后提示关闭,这时就会促发Error: [vuex] Do not mutate vuex store state outside mutation handlers.错误,一脸懵,各种查找是否在其他组件修改了值。
最后注意到一点:在toast提示框关闭之后才报错,再端详一遍代码,看着v-model不太对呀!
将 v-model 改成 :value
<vux-toast :value="vuxToast.value" :position="vuxToast.position" :type="vuxToast.type" :text="vuxToast.text"></vux-toast>
再次测试,完美运行!
至此,需要去恶补一下v-model的知识啦,也可以了解一下组件的自定义双向绑定,对于理解这个v-model知识点非常有帮助。
还是怪自己学艺不精。
与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!
vue报错:Error: [vuex] Do not mutate vuex store state outside mutation handlers.相关推荐
- 解决this._data.$$state...“Error: [vuex] do not mutate vuex store state outside mutation handlers.“ 报错
今天遇到了这样一个报错: [Vue warn]: Error in callback for watcher "function () {return this._data.$$state; ...
- Vue 报错error:0308010C:digital envelope routines::unsupported
Vue 报错error:0308010C:digital envelope routines::unsupported 出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, ...
- Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) {this.selectPlay({list: this.songs,index}) }, ...mapActions(['selectPla ...
- [vuex] Do not mutate vuex store state outside mutation handlers.
我之前是这么使用的: this.form = this.$store.state.common.searchFormData; form是检索表单,每次进入页面从vuex中取出进行初始化,但是在搜索表 ...
- vue 报错 Error: timeout of 5000ms exceeded
报错 Error: timeout of 5000ms exceeded 在确定后端代码没有问题,锁定前端 修改 \src\utils 目录下的 request.js 修改timeout属性值 有需要 ...
- Vue 报错Error: No PostCSS Config found解决办法
从git上 clone 下来的代码: npm install 安装依赖以后,启动服务,出现Error: No PostCSS Config found报错: npm run dev 解决办法: 在项目 ...
- VUE报错 error:0308010C:digital envelope routines::unsupported
新克隆的项目启动时报错Error: error:0308010C:digital envelope routines::unsupported 前期安装过低版本Node,后期换成了最新版Node,后来 ...
- Vue报错Error: Avoided redundant navigation to current locatiton 重复点菜单报错问题
解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 //路由页面添加以下代码: const originalPush = Router.prototype.push ...
- vue报错Error in render: TypeError: Cannot read property 'name' of undefined
因为请求是异步获取数据,所以最先开始item是一个空对象.item.tournament即为undefined. item.tournament.name就会报错 解决办法:加一个v-if的判断条件
最新文章
- C++中输入输出的十六进制八进制
- 用iptables来防止web服务器被CC攻击
- Windows Server 2012 新特性:IPAM的配置
- 中国石油大计算机在线考试中心,中国石油大在线考试.doc
- 跟一个大佬前辈交流了一下
- 深度学习《EBGAN》
- 时序分析基本概念介绍——SDC概述
- 修改yarn的默认安装和缓存位置
- DOS常用命令(从入门到精通)
- 粒子群算法(PSO)光伏发电 MPPT实现多峰值寻优,阴影遮蔽光伏发电算法 使用s函数编写粒子群算法,阴影遮蔽,实现多峰值寻优
- 现场直击 | 复旦MBA科创青干营开营
- 怎样快速使用计算机,三分钟教你如何快速熟悉电脑,怎样快速准确的熟悉键盘打字以及快捷键的使用...
- FL Studio下载2020水果软件注册机音频剪辑功能讲解教程
- 服务器系统怎么安全驱动精灵,服务器驱动精灵
- MWORKS应用案例 | 基于Modelica的射流管式电液伺服阀的建模仿真
- ESXi主机从6.7升级到ESXi 7.0.3后无法识别Emulex LPe12000 HBA卡
- 2021技术人的百宝黑皮书
- 【Visual C++】游戏开发笔记四十 浅墨DirectX教程之八 绘制真实质感的三维世界 光照与材质专场
- UE4代理委托(代理,动态代理,单播,多播)
- 判断当前时间是否在股票开盘时间,不考虑周六周日和节假日