vuex閑置狀態(tài)的重置方案

本篇內(nèi)容介紹了“vuex閑置狀態(tài)的重置方案”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了汾陽免費建站歡迎大家使用！

前言

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

什么狀態(tài)可以重置

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

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

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

什么時候去重置狀態(tài)

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

vuex 中閑置狀態(tài)如何清理

下面將結(jié)合我的github實例 去說明，這個實例創(chuàng)建了一個單頁應(yīng)用，我們通過切換路由的時候?qū)㈤e置的狀態(tài)清除。

改造路由對應(yīng)組件的 module 狀態(tài)

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

路由 page1 對應(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ù)，如果我們在路由改變的時候重置這些數(shù)據(jù)，那么需要將初始化數(shù)據(jù)提取出來，并且暴露一個需要重置的標(biāo)識方法 initState() ，代表路由改變的時候需要重置，當(dāng)然這個方法名稱是個約定，你也可以定義為其他名稱。改造后為：

// 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'

// 檢測所有的 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)備就緒，只需要在路由改變時觸發(fā)重置的方法即可，在入口 vue 文件中處理

// components/app.vue
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

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

    watch: {

      $route(to, from) {
        // 路由改變發(fā)起重置
        this.resetStates();
      }
    }
  }
</script>

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

“vuex閑置狀態(tài)的重置方案”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文名稱：vuex閑置狀態(tài)的重置方案
轉(zhuǎn)載來于：http://bm7419.com/article24/geisje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、外貿(mào)建站、手機網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、用戶體驗、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)