Do not mutate vuex store state outside mutation handlers.
组件代码:
selectItem(item,index) {
this.selectPlay({
list: this.songs,
index
})
},
...mapActions([
'selectPlay'
])
mutation 代码:
[types.SET_PLAYLIST](state, list) {
// 1、state.playlist = JSON.parse(JSON.stringify(list))
// 2、state.playlist = Object.assign([], list)
state.sequenceList = list
},
[types.SET_SEQUENCE_LIST](state, list) {
// 1、state.sequenceList = JSON.parse(JSON.stringify(list))
// 2、state.sequenceList = Object.assign([], list)
state.sequenceList = list
},
actions 代码:
import * as types from './mutation-types' export const selectPlay = function({commit, state}, {list, index}) {
commit(types.SET_SEQUENCE_LIST, list)
commit(types.SET_PLAYLIST, list)
commit(types.SET_CURRENT_INDEX, index)
commit(types.SET_FULL_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}
一直报 Do not mutate vuex store state outside mutation handlers.
但是确实是在mutation 的 handler 里面更改的状态,而且是 commit 的。
问题出在了 payload ,在这的 list 是一个数组,是一个引用类型,所以就有可能在 vuex 之外的地方改变了 list。那么就有可能 this._committing 的值就不会变为 true 。所以就会报这个错。
解决办法就是把 list clone一下,在 mutation 代码那块的注释部分就是 clone 的办法,这样就不会在 vuex 之外的地方改变 state 了。推荐使用第二个方法,第二个方法的性能优于第一个
Do not mutate vuex store state outside mutation handlers.的更多相关文章
- VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers
数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...
- mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.
网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...
- vuex的state,mutation,getter,action
开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...
- [Vuex] Split Vuex Store into Modules using TypeScript
When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...
- [Vuex] Create a Vuex Store using TypeScript
A Vuex store centralizes the state of your app, making it easy to reason about your state flow. In t ...
- Vuex基础-State
官方地址:https://vuex.vuejs.org/zh/guide/state.html 由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个 ...
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
You add array of todos to the store simply by adding them to the state defined in your store/index.j ...
- Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历
今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...
随机推荐
- 图像文字识别(OCR)用什么算法小结
说明:主要考虑深度学习的方法,传统的方法不在考虑范围之内. 1.文字识别步骤 1.1detection:找到有文字的区域(proposal). 1.2classification:识别区域中的文字. ...
- SQL Server Profiler(转载)
SQL Server Profiler工具 一.SQL Profiler工具简介 SQL Profiler是一个图形界面和一组系统存储过程,其作用如下: 图形化监视SQL Server查询: 在后台收 ...
- 什么是图像 -- opencv基础
opencv基础篇--到底什么是图像 什么是图像?英语中有两个单词来形容图像,一个是picture,一个是image.这两者虽然是形容同一个东西,但却又有着区别.picture代表实而有物的真实图像: ...
- 一个简单问题引发对IEnumerable和IQueryable的思考
问题概述: 首先看下图,有客户表和客户负责人表关系是多对多,访问数据库使用的是EF所以这里我们开启了延迟加载,需求就是将每个客户的所有负责人逗号拼接显示在负责人这一栏位, 对你没看错需求就是这么 ...
- PCA 降维算法详解 以及代码示例
转载地址:http://blog.csdn.net/watkinsong/article/details/38536463 1. 前言 PCA : principal component analys ...
- 概述File i/o
1.File对象既可表示文件,也可表示目录(文件夹). 2. 创建一个File对象 File file = new File (String pathName[文件路径名]); 3.在Windows操 ...
- 常用css属性记录
CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: ...
- Centos6配置samba服务器并批量添加用户和文件夹
一.需求 局域网内有若干用户,所有用户访问一个共享目录 每个用户在共享目录里有自己的文件夹 每个用户都可以读取其他人的文件夹 每个用户只能对自己的文件夹有写入权限 所有用户都属于filesgroup组 ...
- GBase数据库——常用命令
针对GBase 8a 版本 1数据库操作与维护 1.1数据库启停 [root@OMMB-66-V10-001 ~]# service gcware stop Stopping GCMonit succ ...
- 关于Oracle死锁处理方法
关于数据库死锁的检查方法一. 数据库死锁的现象程序在执行的过程中,点击确定或保存按钮,程序没有响应,也没有出现报错.二. 死锁的原理当对于数据库某个表的某一列做更新或删 ...