VueX中直接修改數據報錯,修改一維數組,二維數組,報錯的原因


直接修改state中的的數據是不被允許的,會報錯

 

這個時候可以使用三種種方式處理


第一種:使用拓展運算符,深拷貝一維數組或對象
var arrA = [1,2,3,4]
var a = [...arr]
||

var ObjB = {a:1,b:2}
var b = {...ObjB}

如果只是數組

  可以使用slice,深拷貝
  var arrA = [1,2,3,4]
  var a = arrA .slice(0)

  可以concat,深拷貝
  var arrA = [1,2,3,4]
  var a = a.concat(arrA)


第二種:使用Object.assign()淺拷貝數組或對象

var arrA = [1,2,3,4]
var a = Object.assign([], arrA)
||

var ObjB = {a:1,b:2}
var b = Object.assign({}, objB)


在vuex中這些操作是可以的,不會報錯。

 

如果是二維數組依然會報錯,因為二維數組的實際內容是第二維,實際引用地址是第一維的,而拷貝的只有一維的引用地址,所以如果改變二維數組的內容,依然會觸發報錯

那二維數組怎么操作,可以通過第三種方式

var arrC= [{a:1},[1,2,3]]
var arrD = JSON.parse(JSON.stringify(arrC))

這樣就可以了,但是仍然不能直接賦值,去覆蓋整個二維數組,只能單個賦值來操作數組內的某個元素

 

或者使用循環來進行二維數組的深拷貝,通過push添加到一個新的數組內,新的數組也是深拷貝過的,不會和原數組有關聯

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM