zoukankan      html  css  js  c++  java
  • 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 了。推荐使用第二个方法,第二个方法的性能优于第一个

  • 相关阅读:
    C++ 中static 使用大全
    JsonCpp 简单使用
    [转]C++ string的trim, split方法
    线程函数
    C++ 读写文件流
    JQ_返回顶部
    JQ_开发经验
    JQ_五星级评分特效
    JQ_One()函数特效
    JQ_插件开发
  • 原文地址:https://www.cnblogs.com/lan1974/p/9111259.html
Copyright © 2011-2022 走看看