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: ...
随机推荐
- C++ 编译器
C++编译器 当我们定义了一个类的时候, C++编译器在默认的情况下会为我们添加默认的构造方法, 拷贝构造方法, 析构函数和=运算符 在第一次创建对象的语句中如: MyString myString ...
- [转]微信小程序开发系列(一)小程序开发初体验
本文转自:http://www.cnblogs.com/rennix/p/6287432.html 开发小程序所需的基本技能 关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领 ...
- Java进程内缓存
今天和同事聊到了缓存,在Java中实现进程缓存.这里主要思想是,用一个map做缓存.缓存有个生存时间,过期就删除缓存.这里可以考虑两种删除策略,一种是起一个线程,定期删除过期的key.第二个是,剔除模 ...
- Oracle JDBC 连接卡死后 Connection Reset
坑 这绝对是我碰计算机以来遇到的第一大坑! 症状: 在Linux主机上远程登录,执行一个简单的Oracle的JDBC连接程序(jar包),结果硬生生的卡在了连接建立验证阶段,然后等上几分钟后因为连接超 ...
- $smarty->assign('','')查询结果发送给模板
$article = one("select * from article WHERE id = '$id'"); $smarty->assign('abc(随便定义)',' ...
- oracle之数据同步:Oracle Sql Loader使用说明(大批量快速插入数据库记录)
1.准备表数据 select * from emp10; create sequence seq_eseq increment start maxvalue ; --得到序列的SQL语句 select ...
- MySQL远程连接:Host 'x' is not allowed to connect to this MySQL server
远程连接MySQL时发现如下错误: java.sql.SQLException: null, message from server: "Host '192.168.30.23' is no ...
- 01_Quartz基础结构
[各种任务调度的使用场景] 论坛每天凌晨统计论坛用户的积分排名. 论坛每半个小时生成精华文章. 每隔30分钟对锁定过期的用户解锁. 每月1号统计上个月各部门的业务数据. [Quartz 简介] Qua ...
- 用C#实现工资计算公式动态编写
1,工资计算公式 每一个企业都一定会用到工资计算,发工资是一件非常神圣的事情,而计算工资就是一项非常重要的工作.Excel有非常强大的公式功能,帮助了很多财务人员计算工资,但如果企业的人数比较多,而且 ...
- API 的历史
原文出处: apievangelist 译文出处:灯下鼠 历史无处不在. 研究我们来自何方,有助于指引我们前行.科技的发展日新月异,但时常停一下匆忙的脚步,稍稍回顾一下历史,却总是有益的. 下面就 ...