vue报错:Do not mutate vuex store state outside mutation handlers.

news2024/9/20 5:30:45

vue报错:Do not mutate vuex store state outside mutation handlers.

在这里插入图片描述
原因:在vuex store的state外部直接修改了state的值,但是Vuex要求所有的state的修改必须在vuex中,不允许直接咋组件中修改store中的状态,除非通过mutation来进行。
解决方法:通过提交一个mutation来修改store中的状态。首先在store中定义一个mutation来触发这个mutation。例如:
在store中定义mutation:

mutations: {
  removeTab(state, tabName) {
    state.mainTabs = state.mainTabs.filter(item => item.name !== tabName)
  }
}

在组件中提交mutation:

let tabName = _this.$store.state.common.menuActiveName
this.$store.commit('removeTab', tabName)

这样就可以避免直接修改store中的状态而引发的错误。通过mutation来修改store中的状态是VueX的最佳实践,可以确保状态的改变是可追踪和可控的。
在上面示例中,组件定义了一个removeTab方法,该方法通过this.$store.commit('removeTab', tabName)来提交名为'removeTab'mutation,并传递了要删除的tab的名称tabName。这样就能够在vuex store中正确地修改mainTabs的状态,而不会触发"Do not mutate vuex store state outside mutation handlers"错误

代码:
.vue文件中的代码:
在这里插入图片描述
/store/index.js代码:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1633544.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ios CI/CD 持续集成 组件化专题五-(自动发布私有库-组件化搭建)

一:手动发布私有库总结 手动发布pod私有库,需要进行如下几步操作: 1、修改完代码之后,需要提交代码push到git仓库。 2、给代码打tag。 3、修改podspec文件的version值,使其和设置的tag一直。 4、命令行执行pod repo…

【Java EE】日志框架(SLF4J)与门面模式

文章目录 🍀SLF4j🌳门面模式(外观模式)🌸门面模式的定义🌸门面模式的模拟实现🌸门面模式的优点 🌲关于SLF4J框架🌸引入日志门面 ⭕总结 🍀SLF4j SLF4J不同于其他⽇志框架,它不是⼀个…

分子动力学模拟学习-Gromacs工具链

1、总体流程 在gromacs的使用说明中有一个flow chart,比较简略。以下针对一般体系(非蛋白等领域)进行了一些调整,通用性更强。 在做分子动力学模拟时,其复杂性除了以上各种输入输出文件的操作,另一点就是力…

DataX数据采集流程(项目)

目录 1.CDH介绍 2.ClouderaManager架构 3.服务器 4.dataX架构 5.Datax数据处理流程 6.DataX的使用说明 7.Mysql数据切割 8.Mysql数据导入HDFS 9.查询站点 站点页面如下,可进一步查询导入的数据内容 10.dataX-Web访问页面 创建数据库连接 1.CDH介绍 --(…

pycharm中执行./activate命令激活服务器提示“about_Execution_Policies”

1.虚拟环境创建 环境: 操作系统:Windows11 pycharm: 2022.1.4 python版本:3.9 执行命令安装: pip install virtualenv 执行命令创建虚拟环境: virtualenv venv 2.激活报错 执行命令激活虚拟环境&…

朋友们,帮忙填写一个问卷呀!关于高速服务区一体化车流管理系统的线上调研,急需各位大神的帮助!!!

✌ 作者简介:瑞骏 RUIJUN 📫 如果文章知识点有错误的地方,请指正!和大家一起学习,一起进步👀 💬 人生格言:没有我不会的语言,没有你过不去的坎儿。💬 &#x…

Kafka Exactly Once 语义实现原理:幂等性与事务消息

01 前言 在现代分布式系统中,确保数据处理的准确性和一致性是至关重要的。Apache Kafka,作为一个广泛使用的流处理平台,提供了强大的消息队列和流处理功能。随着业务需求的增长,Kafka 的事务消息功能应运而生,它允许应…

cocos-lua资源管理

本文介绍cocos-lua项目的资源管理和工作流,适用人群包括初学者和有经验开发者,故读者可根据自己的需要有选择性的查阅自己需要的内容,下文以ccs代指Cocos Studio 一.简单案例解析 下文通过介绍一个简单demo,介绍合图和资源目录结…

React Router 路由配置数组配组持久化

在一些特定场景下,你可能需要将路由配置数组进行持久化,例如从后端动态加载路由配置或根据用户权限动态生成路由配置。这时,持久化路由配置数组就很有用,可以避免每次应用启动时重新获取或计算路由配置。 持久化路由配置数组的步骤如下: 定义路由配置数组 首先,你需要定义一…

每日一题(力扣55):跳跃游戏--贪心

刚开始像这道题&#xff0c;想的是这么从当前可以走的那几步中选择一步&#xff0c;所以一坨屎一样的代码 class Solution { public:bool canJump(vector<int>& nums) {int nnums.size();int step0;int u0;int u_max0;int step_size0;int max_size0;int loci0;while…

前端vue如何生成二维码

有时候有需要链接直接生成二维码在手机上看的需求&#xff0c;比如下载&#xff0c;比如信息&#xff0c;比如excel 下面先引入包 import QRCode from qrcode; 然后上代码 // 将res转换成二维码const qrCodeData JSON.stringify(res); // 将res转换为字符串作为二维码数据// …

基于Springboot的水产养殖系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的水产养殖系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

php7.4在foreach中对使用数据使用无法??[]判读,无法使用引用传递

代码如下图&#xff1a;这样子在foreach中是无法修改class_history的。正确的应该是去掉??[]判断。 public function actionY(){$array [name>aaa,class_history>[[class_name>一班,class_num>1],[class_name>二班,class_num>2]]];foreach ($array[class_…

系统思考—企业辅导咨询

从2004年、2014年到2024年&#xff0c;国九条政策的发布与变迁不仅影响了行业趋势&#xff0c;更深刻地改变了企业的风险预估和策略辅导。彼得杜鲁克曾经说过&#xff1a;“必须系统地抛弃旧知识。”这不仅是企业领导者的挑战&#xff0c;也是我们每个人的难题。难点不在于我们…

cesium教程

环境搭建 vscode安装Visual Studio Code - Code Editing. Redefined nodejs安装Node.js — Run JavaScript Everywhere cesium源码下载编译 cesium官网下载源码https://cesium.com/downloads/ 解压下载的源码 VsCode打开远吗&#xff0c;找到index.html,右键打开 Open wit…

开源博客项目Blog .NET Core源码学习(20:App.Hosting项目结构分析-8)

本文学习并分析App.Hosting项目中后台管理页面的个人资料页面、修改密码页面。 个人资料页面 个人资料页面用于显示和编辑个人信息&#xff0c;支持从本地上传个人头像。整个页面使用了layui中的表单、日期与时间选择、上传等样式或模块&#xff0c;通过layui.css文件设置样式…

案例-部门管理-删除

黑马程序员JavaWeb开发教程 文章目录 一、查看页面原型二、查看接口文档三、开发1、Controller2、Service&#xff08;1&#xff09;service接口层&#xff08;3&#xff09;service实现层 3、Mapper4、Postman 一、查看页面原型 二、查看接口文档 三、开发 1、Controller 因…

2022-2003年上市公司企业商业信用融资数据

01、数据简介 企业商业信用融资是指企业之间在买卖商品时&#xff0c;以商品形式提供的借贷活动。这种融资方式是经济活动中一种最普遍的债权债务关系。商业信用的存在对于扩大生产和促进流通起到了十分积极的作用&#xff0c;但不可避免的也存在着一些消极的影响。 测算方式…

【高校科研前沿】华东师大白开旭教授博士研究生李珂为一作在RSE发表团队最新成果:基于波谱特征优化的全球大气甲烷智能反演技术

文章简介 论文名称&#xff1a;Developing unbiased estimation of atmospheric methane via machine learning and multiobjective programming based on TROPOMI and GOSAT data&#xff08;基于TROPOMI和GOSAT数据&#xff0c;通过机器学习和多目标规划实现大气甲烷的无偏估…

Linux系统安装Redis7(详细版)

Linux系统安装Redis7 一、windows安装redis二、Linux安装Redis下载redis编辑redis7.conf文件启动redis-server服务如何关闭redis服务设置Redis开机自启动 一、windows安装redis Window 下安装 下载地址&#xff1a;https://github.com/dmajkic/redis/downloads 下载到的Redi…