在vuex中如何實現閒置狀態進行重置

本篇文章主要介紹了vuex 閒置狀態重置方案，現在分享給大家，也給大家做個參考。

前言

大型單頁應用程式（後面都是指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
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

      ...mapActions({
        resetStates: "resetStates"
      })
    },

    watch: {

      $route(to, from) {
        // 路由改变发起重置
        this.resetStates();
      }
    }
  }
</script>

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

總結

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue中如何引用阿里字體圖示的方法

關於Express中log4js實際用法

使用NodeJS如何實作WebSocket功能#

以上是在vuex中如何實現閒置狀態進行重置的詳細內容。更多資訊請關注PHP中文網其他相關文章！