本篇內(nèi)容介紹了“vuex閑置狀態(tài)的重置方案”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
前言
大型單頁(yè)應(yīng)用（后面都是指spa），我們往往會(huì)通過使用狀態(tài)管理器 vuex 去解決組件間狀態(tài)共享與狀態(tài)傳遞等問題。這種應(yīng)用少則幾十個(gè)單頁(yè)，多則上百個(gè)單頁(yè)。隨著路由的頻繁切換，每個(gè)路由對(duì)應(yīng)的 vuex 中的狀態(tài)將越來越多。為了做到頁(yè)面的極致優(yōu)化，我們需要將那些閑置的狀態(tài)重置，以減小占用的內(nèi)存空間。
什么狀態(tài)可以重置
vuex 強(qiáng)調(diào)采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，但是我們真把所有的狀態(tài)都放到 store 中去處理，你會(huì)發(fā)現(xiàn)開發(fā)起來非常痛苦。這里如果想很好的把控哪些數(shù)據(jù)需要放到 store 中去管理，首先要理解 vuex 是用來解決什么問題的。vuex 官網(wǎng)指出是為了解決 多個(gè)組件共享狀態(tài) 的，那么我們就可以把多個(gè)組件的共享狀態(tài)放到 store 中去管理，這里的多組件共享對(duì)于單頁(yè)應(yīng)用很多情況是跨路由的組件。如果 store只存儲(chǔ)多組件共享的狀態(tài)，那么我們就沒必要去清理 vuex 中的狀態(tài)了，因?yàn)檫@些狀態(tài)隨時(shí)會(huì)被用到。
而隨著業(yè)務(wù)場(chǎng)景越來越復(fù)雜，很多與后臺(tái)交互的邏輯也都放到了組件中，這樣代碼就變得很凌亂，vuex 也沒有被充分利用。這時(shí)我們可以把與后臺(tái) api 交互的邏輯放到 vuex 中的action 去處理，后臺(tái)返回的狀態(tài)自然也就放到了 store 管理。這樣處理后，組件就只負(fù)責(zé)對(duì)數(shù)據(jù)進(jìn)行渲染，邏輯非常清晰。而此時(shí)，組件對(duì)應(yīng)的 store 中的狀態(tài)隨著路由的切換將會(huì)越來越多，而這些狀態(tài)就需要我們手動(dòng)的去清理了。
很多方案都有取舍，如果將與后臺(tái) api 交互的數(shù)據(jù)放到組件中，就沒必要去清理了，但是代碼邏輯將變得比較亂。另外諸如 vuex 的插件vue-devtools 將無法監(jiān)控到每次請(qǐng)求數(shù)據(jù)的變化...
什么時(shí)候去重置狀態(tài)
我們想要的效果是在路由切換的時(shí)候，把上一個(gè)路由對(duì)應(yīng)的 vuex 中的狀態(tài)重置掉，但是路由和vuex 并沒有一一對(duì)應(yīng)的關(guān)系，如果要做到這種效果，那么我們需要維護(hù)一個(gè)路由與vuex 模塊的對(duì)應(yīng)關(guān)系，這樣會(huì)很繁瑣。不如當(dāng)路由改變時(shí)去重置 vuex 中的所有狀態(tài)。
vuex 中閑置狀態(tài)如何清理
下面將結(jié)合我的github實(shí)例 去說明，這個(gè)實(shí)例創(chuàng)建了一個(gè)單頁(yè)應(yīng)用，我們通過切換路由的時(shí)候?qū)㈤e置的狀態(tài)清除。
改造路由對(duì)應(yīng)組件的 module 狀態(tài)
實(shí)例中采用拆分 store 為多個(gè) module 的方式，將路由對(duì)應(yīng)的組件狀態(tài)放到對(duì)應(yīng)的 module 中，多組件共享的狀態(tài)放到頂級(jí)的 store 中管理。大致如下：
重慶分公司
重慶分公司
// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";
export default new Vuex.Store({
state,
getters,
actions,
mutations,
modules: { // 每個(gè)路由對(duì)應(yīng)的 module
page1,
page2,
page3,
page4,
page5
},
plugins: __DEV__ ? [createLogger()] : [],
strict: __DEV__ ? true : false
});路由 page1 對(duì)應(yīng)的 module 的 state 形如：
// store/modules/page1.js
const state = {
// 列表數(shù)據(jù)
page1Data: [],
// 標(biāo)題數(shù)據(jù)
page1Title: ''
}這些數(shù)據(jù)是通過調(diào)用后端 api 返回并復(fù)制的數(shù)據(jù)，如果我們?cè)诼酚筛淖兊臅r(shí)候重置這些數(shù)據(jù)，那么需要將初始化數(shù)據(jù)提取出來，并且暴露一個(gè)需要重置的標(biāo)識(shí)方法 initState() ，代表路由改變的時(shí)候需要重置，當(dāng)然這個(gè)方法名稱是個(gè)約定，你也可以定義為其他名稱。改造后為：
// store/modules/page1.js
// 放置你要重置的數(shù)據(jù)
const initState = {
page1Data: [],
}
// state
const state = {
// 參數(shù)解構(gòu)
...initState,
// 路由改變不想重置的數(shù)據(jù)
page1Title: '',
initState(){
return initState
}
}全局 module 配置
定義全局 mutation 事件類型
// store/types.js export const RESET_STATES = 'resetStates'
定義全局 mutation
// store/mutation.js
import * as types from './types'
// 檢測(cè)所有的 state 并把 `initState()` 中的屬性重置
function resetState(state, moduleState) {
const mState = state[moduleState];
if (mState.initState && typeof mState.initState === 'function') {
const initState = mState.initState();
for (const key in initState) {
mState[key] = initState[key];
}
}
}
export default {
[types.RESET_STATES](state, payload) {
for (const moduleState in state) {
resetState(state, moduleState);
}
},
}定義全局 action
// store/action.js
import * as types from './types'
export default {
// rest state action
resetStates:function (context, payLoad) {
context.commit(types.RESET_STATES, payLoad);
}
}路由切換觸發(fā)重置方法
至此一切準(zhǔn)備就緒，只需要在路由改變時(shí)觸發(fā)重置的方法即可，在入口 vue 文件中處理
// components/app.vue
如果你的 chrome 瀏覽器安裝了vuejs-devtools 在路由切換的時(shí)候就能夠很清晰的看到上一個(gè)路由數(shù)據(jù)的的重置過程。
“vuex閑置狀態(tài)的重置方案”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
