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: ...
随机推荐
- nyoj 568——RMQ with Shifts——————【线段树单点更新、区间求最值】
RMQ with Shifts 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 In the traditional RMQ (Range Minimum Q ...
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
- 关于Javascript模块化和命名空间管理的问题说明
最近闲下来的时候,稍微想了想这个问题.关于Javascript模块化和命名空间管理 [关于模块化以及为什么要模块化] 先说说我们为什么要模块化吧.其实这还是和编码思想和代码管理的便利度相关(没有提及名 ...
- 虚拟机中Linux设置当前ip
1.查看当前IP,查看网卡信息 ifconfig 2.设置临时IP ifconfig eth0 192.168.1.163 netmask 255.255.255.0 eth0表示第一块网卡 设置完之 ...
- 1、Angular2 Component 组件
angular2借鉴了.http://www.cnblogs.com/lewis617/p/5191007.html 导入了自己的思维方式 1.基本属性 2.*语法与template标签 3.组件的嵌 ...
- 合约实战,代币合约,DAPP开发
1. ERC20标准 https://github.com/ethereum/EIPs/blob/master/EIPS/eip-20.md pragma solidity ^; //定义接口 con ...
- oracle UDT 有关数据字典的研究
1.数据及类型准备 创建了一个自定义类型 create or replace type addr_type as object( street varchar2(30); city varchar2( ...
- HDU 5007 字符串匹配
http://acm.hust.edu.cn/vjudge/contest/122814#problem/A 匹配到字符串就输出,水题,主要是substr的运用 #include <iostre ...
- C# 矩阵运算和一些基本的几何运算
以前工作中写的,这里备个份,有可能用到 基本的矩阵运算类,测试20阶以内应该没啥问题,超过20阶不好使... /// <summary> /// 矩阵 异常 512索引 1024无解 20 ...
- vue.js练习经验总结
1.最好JSON数据与(模板里 v-bind里绑定的自定义属性不要重名),根据console控制台的提示来看,应该是重名所引起的编译错误 2.还有个很奇怪的问题,局部注册vue的过滤器,到了模板之后不 ...