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: ...
随机推荐
- multiprocessing 模块
multiprocessing模块 进程对象 创建 p = Process(target=foo, args=(param,)) 属性 p.daemon: True为守护进程, 守护进程内无法再开启子 ...
- sqlserver2008 调试存储过程
1.创建所需要调试的存储过程,并执行一下,也就是保存好 ,我要演示的存储过程名是 “usp_Passport_GetNewDepositary” 2.找到存储过程,右键“执行存储过程”,会弹出如下的界 ...
- spring-boot 1.4.x遇到的cpu高的问题
如果你的spring-boot应用里tomcat线程耗cpu较高,并主要耗在做读取jar的操作上(堆栈类似下面),可能跟我们遇到同样的问题. CRC32.update(byte[], int, int ...
- C# 自定义属性Attribute
自定义属性 /// <summary> /// 脱敏属性 /// </summary> public class SensitiveAttribute:Attribute { ...
- 项目搭建系列之四:SpringMVC框架下使用UrlRewrite实现地址重写
简单记录一下UrlRewrite实现地址重写功能. 1.pom.xml 在pom.xml增加配置UrlRewrite jar <!-- URL Rewrite --> <depend ...
- 封装http请求键值对的js函数
//封装http请求键值对的函数 function Map() { this.keys = new Array(); this.data = {}; //添加键值对 this.put = functi ...
- Python学习系列----第五章 模块
5.1 如何引入模块 在Python中用关键字import来引入某个模块,比如要引用模块math,就可以在文件最开始的地方用import math来引入.在调用math模块中的函数时,必须这样引用: ...
- String_Helper
#region 扩展验证方法 #region <<IsNullOrEmpty()字符串是否为空>> /// <summary> /// <para>代码 ...
- 【MATLAB】R2017b两个镜像文件如何安装
1.采用DEAMON TOOLS加载镜像1. 2.当安装过程中弹出[请插入DVD2]时,在原来的盘符上面右键点击[装载],选择DVD2的镜像文件.在安装程序处选择[继续]即可正常安装.
- 在浏览器里使用SAPGUI里的SE80
效果如图:点击Fiori launchpad的SE80对应的tile: 即可在浏览器里打开SE80 具体步骤 (1). 在后台找到Fiori catalog page ID: SAP_FIORI_EX ...