vuex重置所有state(可定製)

unique丶J發表於2019-02-16
Vue

在正式場景中我們經常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的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，使其不被更新。
當然我們也可以傳入值來更新相應值，其他所有值不進行更新（這裡我們就不詳細說明）

以上，就是我實踐思考出來的方法，可能有不足的地方，歡迎大家提問、交流或提出更好的建議。謝謝

相關文章