重置vuex所有state的狀態

2021-10-10 09:07:34 字數 1008 閱讀 4459

效果

思路

主要是在store首次生成state後深拷貝出乙份備份,然後在reset方法中將各個屬性還原回去,注意最重要的是不要破壞原來資料的結構 我之前還看到有人用delete,資料屬性都沒了肯定是會報錯的

步驟1準備乙個深拷貝方法

// 定義乙個深拷貝函式  接收目標target引數

deepclone

(target)

// 判斷如果當前的值是null的話;直接賦值為null

}else

if(target ===

null

)else

if(target.constructor === regexp)

else

for(

const i in target)

}// 如果不是物件的話,就是基本資料型別,那麼直接賦值

}else

// 返回最終結果

return result

},

步驟2將首次生成的store拷貝出來,注意不要在modules裡面,在最外層的index裡面,

// 深拷貝state初始狀態用於還原

const storetel = util.

deepclone

(store.state)

步驟3在原型上定義reset方法還原屬性,注意需要對原始資料進行二次深拷貝,防止汙染

// 新增store 重置方法

vuex.store.prototype.

reset

=function()

vuex的state狀態倉庫管理

vuex,在官網上的解釋是 vuex是乙個專為vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可 的方式發生變化 state就是vuex中的資料倉儲,用於儲存所有元件的公共資料,資料需初始化且不支援直接修改。直接獲取state中的資料只需...

Vuex中的state訪問狀態物件

state 這個就是我們說的訪問狀態物件,它就是我們spa 單頁應用程式 中的共享值。如何把狀態物件賦值給內部物件,也就是把stroe.js中的值,賦值給我們模板裡data中的值。我們有三種賦值方式。一 通過computed的計算屬性直接賦值 computed屬性可以在輸出前,對data中的值進行改...

vuex 修改state中的資料操作

1 state 中的資料,是能可以直接寫方法methods修改的,注意 是不推薦這種方式修改 1 直接修改,就會不安全 2 每個元件例項,都可以通過 this.store 來訪問store物件裡的共享資料 2 修改操作state的資料,要通過mutations,在裡面寫方法 同步操作 1 所有的資料...