组件代码:

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. 跨源资源共享(CORS)

    一.跨源的定义一个“源”有三部分组成:协议.域名.端口.任一部分不一致即为跨源.比如:(http,example.com,80)和(https,example.com,443)就是不同的源.   二. ...

  2. PAT 1083 List Grades

    #include <cstdio> #include <cstdlib> using namespace std; class Stu { public: ]; ]; }; i ...

  3. link 和 import 导入外部样式的区别

    差别一:link 属于 XHTML 标签,而 @import 完全是 CSS 提供的 一种方式.link标签除了可以加载 CSS 外,还可以做很多事情,比如定义 RSS ,定义 rel 链接属性等.  ...

  4. CSS 兼容性支持

    CSS 兼容性支持 在一个CSS属性还没有成为标准之前,各浏览器厂商已经做了这个属性的实现,可能各浏览器实现不尽相同,所以加入属性前缀区分. safari , chrome:-webkit- oper ...

  5. angular2-动画

    使用动画: import { Component, Input } from '@angular/core'; import { trigger, state, style, animate, tra ...

  6. Java开发坏境配置

    在"系统变量"中设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建" ...

  7. Dubbo架构原理

    1 Dubbo核心功能 Remoting:远程通讯,提供对多种NIO框架抽象封装,包括“同步转异步”和“请求-响应”模式的信息交换方式. Cluster: 服务框架,提供基于接口方法的透明远程过程调用 ...

  8. Android—PopupWindow的简单使用

    PopupWindow 是一个可以显示在当前 Activity 之上的浮动容器,这个Demo要实现的功能是,点击布局中的两个按钮,进而控制PopupWindow的显示与消失,代码中有详细的注释首先看一 ...

  9. installed_oracle_can't_use

    Preface 1.my server is windowsxp 2.database is the oralce 10g step A.CHECK SERVER 1.win + r cmd sqlp ...

  10. 1.Zabbix 3.0 基础

    请查看我的有道云笔记: http://note.youdao.com/noteshare?id=85046af7675851675679a47beadc7aa3&sub=000AB0B2409 ...