vuex 閑置狀態重置方案

junfeng777 發布于2019-08-21 18:36 / 1024人閱讀

摘要：為了做到頁面的極致優化，我們需要將那些閑置的狀態重置，以減小占用的內存空間。不如當路由改變時去重置中的所有狀態。這里只是提供一種重置狀態的一種方案，如果有更好方案還請各位看官留言。

前言

大型單頁應用（后面都是指spa），我們往往會通過使用狀態管理器 vuex 去解決組件間狀態共享與狀態傳遞等問題。這種應用少則幾十個單頁，多則上百個單頁。隨著路由的頻繁切換，每個路由對應的 vuex 中的狀態將越來越多。為了做到頁面的極致優化，我們需要將那些閑置的狀態重置，以減小占用的內存空間。

什么狀態可以重置

vuex 強調采用集中式存儲管理應用的所有組件的狀態，但是我們真把所有的狀態都放到 store 中去處理，你會發現開發起來非常痛苦。這里如果想很好的把控哪些數據需要放到 store 中去管理，首先要理解 vuex 是用來解決什么問題的。vuex 官網指出是為了解決多個組件共享狀態的，那么我們就可以把多個組件的共享狀態放到 store 中去管理，這里的多組件共享對于單頁應用很多情況是跨路由的組件。如果 store只存儲多組件共享的狀態，那么我們就沒必要去清理 vuex 中的狀態了，因為這些狀態隨時會被用到。

而隨著業務場景越來越復雜，很多與后臺交互的邏輯也都放到了組件中，這樣代碼就變得很凌亂，vuex 也沒有被充分利用。這時我們可以把與后臺 api 交互的邏輯放到 vuex 中的action 去處理，后臺返回的狀態自然也就放到了 store 管理。這樣處理后，組件就只負責對數據進行渲染，邏輯非常清晰。而此時，組件對應的 store 中的狀態隨著路由的切換將會越來越多，而這些狀態就需要我們手動的去清理了。

很多方案都有取舍，如果將與后臺 api 交互的數據放到組件中，就沒必要去清理了，但是代碼邏輯將變得比較亂。另外諸如 vuex 的插件 vue-devtools 將無法監控到每次請求數據的變化...

什么時候去重置狀態

我們想要的效果是在路由切換的時候，把上一個路由對應的 vuex 中的狀態重置掉，但是路由和vuex 并沒有一一對應的關系，如果要做到這種效果，那么我們需要維護一個路由與vuex 模塊的對應關系，這樣會很繁瑣。不如當路由改變時去重置 vuex 中的所有狀態。

vuex 中閑置狀態如何清理

下面將結合我的github實例去說明，這個實例創建了一個單頁應用，我們通過切換路由的時候將閑置的狀態清除。

改造路由對應組件的 module 狀態

實例中采用拆分 store 為多個 module 的方式，將路由對應的組件狀態放到對應的 module 中，多組件共享的狀態放到頂級的 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: { // 每個路由對應的 module
        page1,
        page2,
        page3,
        page4,
        page5
    },
    plugins: __DEV__ ? [createLogger()] : [],
    strict: __DEV__ ? true : false
});

路由 page1 對應的 module 的 state 形如：

// store/modules/page1.js
const state = {
     // 列表數據
     page1Data: [],
     // 標題數據
     page1Title: ""
}

這些數據是通過調用后端 api 返回并復制的數據，如果我們在路由改變的時候重置這些數據，那么需要將初始化數據提取出來，并且暴露一個需要重置的標識方法 initState()，代表路由改變的時候需要重置，當然這個方法名稱是個約定，你也可以定義為其他名稱。改造后為：

// store/modules/page1.js

// 放置你要重置的數據
const initState = {

    page1Data: [],
}

// state
const state = {
    // 參數解構
    ...initState,

    // 路由改變不想重置的數據
    page1Title: "",

    initState(){

        return initState
    }
}

全局 module 配置

定義全局 mutation 事件類型

// store/types.js
export const RESET_STATES = "resetStates"

定義全局 mutation

// store/mutation.js

import * as types from "./types"

// 檢測所有的 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);
    }
}

路由切換觸發重置方法

至此一切準備就緒，只需要在路由改變時觸發重置的方法即可，在入口 vue 文件中處理

// components/app.vue

如果你的 chrome 瀏覽器安裝了 vuejs-devtools 在路由切換的時候就能夠很清晰的看到上一個路由數據的的重置過程。

總結

實例點這里。我們這里的 vuex 狀態重置，是每次路由切換遍歷所有的 store 中的狀態，并把initState() 中的屬性重置，如果能做到把當前的路由對應的 state 重置就更好了，但是路由和 store 中的 module 并沒有關聯關系。這里只是提供一種重置 vuex 狀態的一種方案，如果有更好方案還請各位看官留言。如有不妥的地方也歡迎拍磚留言。

--完--

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90631.html

vuex重置所有state(可定制)

摘要：這里為什么是一個數組呢因為這就是標題所描述的可定制，如果頁面內重置絕大部分狀態，但需要保留其中一些狀態的時候我們可以通過我們傳遞過來的值來剔除相應的，使其不被更新。在正式場景中我們經常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的vuex，讓其變為初始狀態，那么，就涉及到了多種方法：1、頁面刷新： window.location.reload() 這個方法通過路由判斷...

singerye 2019-08-23 14:47 評論0 收藏0
vuex重置所有state(可定制)

摘要：這里為什么是一個數組呢因為這就是標題所描述的可定制，如果頁面內重置絕大部分狀態，但需要保留其中一些狀態的時候我們可以通過我們傳遞過來的值來剔除相應的，使其不被更新。在正式場景中我們經常遇到一個問題，就是登出頁面或其他操作的時候，我們需要重置所有的vuex，讓其變為初始狀態，那么，就涉及到了多種方法：1、頁面刷新： window.location.reload() 這個方法通過路由判斷...

LeviDing 2019-08-02 14:06 評論0 收藏0
vue vuex vue-rouert后臺項目——權限路由（超詳細簡單版）

摘要：可以配合相關的官方文檔學習。上面的內容說的重點，其實也算是項目的全部啦項目地址感覺還不錯的話就請給個吧謝謝有什么問題歡迎提問項目地址：vue-simple-template共三個角色：adan barbara carrie 密碼全是：123456 adan 擁有最高權限A 他可以看到 red , yellow 和 blue 頁面（共三個頁面）barbara 擁有權限B 他可以看到...

olle 2019-08-21 18:29 評論0 收藏0
基于vue2 + muse-ui構建的移動端、PC端輕社區項目 F-Rent 友租

摘要：如果有什么可以幫到你的無論是不是此項目中的問題都可以在提出我會盡我所能幫你解決歡迎大佬們提出好的問題和點子，我會第一時間去修正。前言本項目(友租)是基于Vue2、Vuex、Muse-UI、es6、webpack構建的一個移動端、PC端輕社區項目項目地址GitHub 項目更新歷史開發環境 Macos + Vs code + Chrome 項目的靈感最初來源：由于我是一個宅男在...

linkFly 2019-08-21 16:54 評論0 收藏0