组件代码:

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.的更多相关文章

  1. VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers

    数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...

  2. mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.

    网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...

  3. vuex的state,mutation,getter,action

    开始!正常的简单的拆分下是这样的文件当然module可以在store下面新建一个文件夹用来处理单独模块的vuex管理比较合适. 1.index.js下面 import Vue from 'vue' i ...

  4. [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 ...

  5. [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 ...

  6. Vuex基础-State

    官方地址:https://vuex.vuejs.org/zh/guide/state.html 由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个 ...

  7. [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 ...

  8. Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

    今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...

  9. 在vue组件中使用vuex的state状态对象的5种方式

    下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...

随机推荐

  1. Problem E: 积木积水 ——————【模拟】

    Problem E: 积木积水 Description 现有一堆边长为1的已经放置好的积木,小明(对的,你没看错,的确是陪伴我们成长的那个小明)想知道当下雨天来时会有多少积水.小明又是如此地喜欢二次元 ...

  2. SpringBoot | 第三十四章:CXF构建WebService服务

    前言 上一章节,讲解了如何使用Spring-WS构建WebService服务.其实,创建WebService的方式有很多的,今天来看看如何使用apache cxf来构建及调用WebService服务. ...

  3. tornado handler 方法复用的 3 个方法

    tornado handler 调用 特性 在一次 tornado 请求中调用其他 tornado handler 中的方法, 比如 run 方法 引言 在后台开发中, 有时需要做一些功能的整合, 比 ...

  4. JavaScript对象 继承

    JavaScript继承主要依靠原型链实现. 原型链 利用原型让一个引用类型继承另一个引用类型水位属性和方法. 每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指 ...

  5. JVM如何加载一个类的过程,双亲委派模型中有哪些方法

    1.类加载过程:加载.验证.准备.解析.初始化   加载   在加载阶段,虚拟机主要完成三件事: 1.通过一个类的全限定名来获取定义此类的二进制字节流. 2.将这个字节流所代表的静态存储结构转化为方法 ...

  6. C# 获得word中某一段落所在页的页码

    方式一:通过openxml 从xml结构里获得不可行.原因如下A footer is not on a page and a page number in a footer is a field th ...

  7. Machine Learning的定义

    ---恢复内容开始--- 所下内容都是对吴恩达教授的机器学习所做的笔记 下面是Arthur Samue对机器学习的定义 在没有明确设置的情况下,是计算机具有学习能力的研究领域. 这是一个比较陈旧一点的 ...

  8. node.js-cancelled because Node.js is unresponsive

    今天初学node.js,但是在使用vs code 进行启动调试的时候出现了一个问题 这个报错,一开始我并不知道是什么意思.(而截至我写这个笔记我也还没了解清楚) 大概翻译出来的意思是说 “node.j ...

  9. Android DiskLruCache完全解析,硬盘缓存的最佳方案 --转载

    概述 记得在很早之前,我有写过一篇文章 Android高效加载大图.多图解决方案,有效避免程序OOM,这篇文章是翻译自Android Doc的,其中防止多图OOM的核心解决思路就是使用LruCache ...

  10. 使用 SQL SERVER PROFILER 监测死锁

    作为DBA,可能经常会遇到有同事或者客户反映经常发生死锁,影响了系统的使用.此时,你需要尽快侦测和处理这类问题. 死锁是当两个或者以上的事务互相阻塞引起的.在这种情况下两个事务会无限期地等待对方释放资 ...