vuex重置所有state的方法

小編給大家分享一下vuex重置所有state的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

在正式場景中我們經常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的vuex，讓其變為初始狀態，
那么，就涉及到了多種方法：

1、頁面刷新：

window.location.reload()

這個方法通過路由判斷優化或是邏輯優化，始終頁面時重新加載，就會導致用戶體驗很差，對瀏覽器來說也是一種不必要的負擔，所以我嘗試之后就放棄了。

2、寫一個重置的方法然后調取

actions.resetVuex = function() {
  store.commit(state.a, null)
  store.commit(state.b, null)
  store.commit(state.c, null)
  ...
}

store.dispatch('resetVuex')

這樣又會出現多個module，多個state，需要手動添加多個，工作量巨大且不易維護，而且如果我們state初始是個個數組，一個對象這些更不好操作，更優最多就是我們初始的時候深拷貝一份，但是也需要每個module里進行操作和封裝

這兩種方法是可以解決問題的，但是我還是沒有采用這兩種方式，因為感覺已經犧牲了某些東西來達成目的了，通過我反復的實踐，和摸索我采取了以下方法：

首先頁面加載，第一次加載引入store的時候，store的所有state肯定是初始值，那么我就做一個本地緩存記錄下來：
這里我采用了store插件（引用方式參考 https://github.com/nbubna/store）

在main.js創建vue實例之前：

import _store from 'store'
import createStore from './store'
...

const store = createStore() //我創建好的 vuex庫
_store({ initState: store.state }) //緩存一個名為initState的初始狀態

我們知道main.js是頁面載入的時候執行一次的那么緩存的initState就是自己最開始創建store里的state狀態
(包含了module里的所有state)；

然后我們在store創建的全局寫一個mutation方法

這里我采用了store插件（引用方式參考 https://github.com/nbubna/store）

這里我采用了lodash插件（引用方式參考 https://www.lodashjs.com/）

import _ from 'lodash'
import _store from 'store2'
...

const store = new Vuex.Store({
  state: {
   token: ''
  },
  mutations: {
   resetAllState (state, payload) {
    if (payload instanceof Array === false) { // 驗證傳入的是一個數組
     return
    }
    
    const initState = _store('initState') // 取出初始值的緩存
    const _initState = payload.length ? _.omit(initState, payload) : initState // 判斷傳入值有無數據，有數據剔除相對應的值
    
    _.extend(state, _initState)
   }
  },
  modules: {
   ...
  }
  }）

這個名叫resetAllState的mutation方法里就是講全局的state替換成我們緩存的state。

這里為什么 payload 是一個數組呢？

因為這就是標題所描述的可定制，如果頁面內重置絕大部分狀態，但需要保留其中一些狀態的時候我們可以通過我們傳遞過來的state值來剔除相應的state，使其不被更新。

當然我們也可以傳入值來更新相應值，其他所有值不進行更新（這里我們就不詳細說明）

看完了這篇文章，相信你對“vuex重置所有state的方法”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！