组件代码:

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. IE中使用TerraExplorerPro ActiveX控件问题总结

    近段时间,由于工作需要,涉及到Skyline Web的二次开发,遇到一些问题: 问题1:IE中无法使用Skyline 提供的ActiveX Component 的API 解决方法:这个问题一般是没有正 ...

  2. 记自己的hexo个人博客

    https://othercoding.github.io/

  3. Git连接远程服务器输入密码问题

    当遇到使用Git从远程pull 或者 push代码的时候提示输入密码的时候,毫无疑问SSH Key出问题了! 一.如果只是使用Git Bash,重新生成一下ssh,把新的id_rsa.pub添加到Gi ...

  4. sp_addlinkedserver创建远程服务器查询

    远程服务器查询可以分两步完成: 1.建立连接服务器 exec sp_addlinkedserver @server='Test_Server', --被访问的服务器别名 @srvproduct='', ...

  5. rem,em,px

    http://pxtoem.com/  px,em,rem单位转换工具 px(Pixel)根据显示屏分辨率,固定大小 em,根据父元素大小进行改变 rem,根据html进行相对改变 em 1. bod ...

  6. ArcGIS图框生成和批量打印工具 5.2支持国家2000坐标系,支持ArcGIS10.1、ArcGIS10.2,输出图片可以是TIF和JPG

    主要两个功能有:生成图框.批量输出MXD和JPG http://files.cnblogs.com/gisoracle/ScalePrint.rar 1.        批量生成标准分幅图或行政区划, ...

  7. 16_Queue_利用wait()和notify()编写一个阻塞队列

    [线程间通信概念] 线程是操作系统中独立的个体,但这些个体如果不经过特殊的处理就不能成为一个整体,线程间的通信就成为整体必用方式之一.当线程存在通信指挥,线程间的交互性会更强大,在提高CPU利用率的同 ...

  8. Struts2项目问题及解决方式

    1.  问题描述如图: 问题解释:意思就是execute()方法写错了. 问题解决: 改正:

  9. Qt之QSS(样式表语法)

    http://blog.csdn.net/liang19890820/article/details/51691212 版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣.好玩.靠谱...作者: ...

  10. PDF2SWF简单使用

    最近在项目中遇到文档预览的需求,和PM商讨了几种解决方案,最终还是选中了转为SWF的方式.下面就稍微记录一下自己的学习成果. 工具:pdf2swf 下载地址:http://www.swftools.o ...