在正式場景中我們經常遇到一個問題,就是登出頁面或其他操作的時候,我們需要重置所有的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,使其不被更新。
當然我們也可以傳入值來更新相應值,其他所有值不進行更新(這裏我們就不詳細說明)
以上,就是我實踐思考出來的方法,可能有不足的地方,歡迎大家提問、交流或提出更好的建議。謝謝