vuex狀態初始化中間件設計

fireflow 發布于2019-08-20 10:11 / 984人閱讀

摘要：在之前使用的過程中，對于狀態初始化的設計思路，是將其放到一個全局服務中，這樣每次進到不同頁面，只需要調用同一個全局的動作，就能完成初始化。同時，具體的初始化狀態值，則由每個模塊自己控制。的中間件有個特點，首先它提供了與動作的切入口。

總算把最近嘗試的東西實現出來了，寫點文章沉淀一下。

前言

單頁面應用在使用單向數據流的設計方案后，狀態樹的控制就變得至關重要。這里面對的問題在于一個最基礎的點，同時也是最常用的一點－－初始狀態的控制與恢復
每次切換到一個頁面，如果是動態數據頁面，總是會先加載一些默認數據，或者清空現有數據，換句話說，就是初始化一下。
在之前使用vue + vuex的過程中，對于狀態初始化的設計思路，是將其放到一個全局服務中，這樣每次進到不同頁面，只需要調用同一個全局的動作，就能完成初始化。同時，具體的初始化狀態值，則由每個模塊自己控制。

問題

在查看了vuex源碼后，發現對于vuex的module而言，只是將所有module放到了同一個vm對象中，然后watch了一下。筆者之前在申明module中state對象時，經常使用const關鍵字，用意是認為申明時的state值一直作為靜態值存在著，代表可返回的初始狀態。而看了源碼后，被打臉打飛了。。。。
那么怎么才能有一個靜態的初始狀態，讓我們在切換頁面時能夠恢復呢？當然，最好這個初始狀態時能夠根據情況，可更替的。換句話說，這個所謂初始狀態，應該是一個可定義的用于恢復的靜態狀態。

解決方案

Talk is cheap, show me the code.

來來來，一言不合就上代碼～
源碼以及相關樣例可以在我的github上找到，鏈接點此

import Vue from "vue"

function deepClone(obj) {
  if (Array.isArray(obj)) {
    return obj.map(deepClone)
  } else if (obj && typeof obj === "object") {
    var cloned = {}
    var keys = Object.keys(obj)
    for (var i = 0, l = keys.length; i < l; i++) {
      var key = keys[i]
      cloned[key] = deepClone(obj[key])
    }
    return cloned
  } else {
    return obj
  }
}

const commonMutations = {
  INIT_STATE(state, moduleName) {
    state[moduleName] = deepClone(state.cache[moduleName])
  },
  CACHE_STATE(state, moduleName, newState) {
    state.cache[moduleName] = deepClone(newState)
  },
}

const commonActions = {
  initComponent({ dispatch }, name) {
    dispatch("INIT_STATE", name)
  },
  changeCacheState(store, module, state = store._vm[module]) {
    store.dispatch("CACHE_STATE", module, state)
  }
}

export default {
  onInit(state, store) {
    // hot load common mutations
    store.hotUpdate({
      mutations: commonMutations
    })
    // cache init state
    store._setupModuleState(state, {
        cache: {
          state: deepClone(state)
        }
      })
      // mixin all actions to the root vm
    Vue.mixin({
      vuex: {
        actions: commonActions
      }
    })
  }
}

關鍵點解讀 1. 深層克隆

這里deep copy用了vuex源碼里util的一個方法，官方注釋上寫著說比JSON.parse(JSON.stringify(obj))要來的更快，于是我就參(fu)考(zhi)過來了～～
什么？為什么要深拷貝？因為我們要維護一個靜態狀態的前端臨時倉庫呀～就像是前端的臨時數據庫一樣，所謂數據驅動嘛～
于是下一步就是我們怎么把這個臨時的靜態狀態對象讓全局能夠共享。這里用的方法就是一起扔到store綁定的vm對象上去

2. 全局使用便捷性

為了能夠讓代碼全局都享受到這個便捷性，筆者在這里利用了vuex的中間件。vuex的中間件有2個特點，首先它提供了init與mutate動作的切入口。其次是它與store有著緊密聯系。也因此，可以滿足我們便捷性需要用到的2個需求：

應用啟動時注冊

應用全局可調用，不需要另外引入

所以就將init需要用到的commonMutation通過hotupdate的方式，在module初始化的時候，將init模塊注冊到全局，同時在store中加上當前模塊初始狀態的深拷貝
此外，利用了vue本身的mixin機制，將commonActions注冊到全局的vm對象上
這樣做的結果是什么呢？
去看看demo吧～～
地址在此

云服務器 GPU云服務器中間狀態 Vuex vuex cdn Vue_Vuex

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

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

Vuex — The core of Vue application

摘要：個人看來，一個狀態管理的應用，無論是使用，還是，最困難的部分是在的設計。中，并沒有移除，而是改為用于觸發。也是一個對象，用于注冊，每個都是一個用于返回一部分的。接受一個數組或對象，根據相應的值將對應的綁定到組件上。系列文章: Vue 2.0 升（cai）級（keng）之旅 Vuex — The core of Vue application (本文) 從單頁應用(SPA)到服務器...

Aldous 2019-08-20 10:25 評論0 收藏0
實現一個稍微復雜的simplelist

摘要：是一個專門為應用所設計的集中式狀態管理架構。此時可以幫助我們實現狀態的管理。每個任務都歸屬于一個清單，有唯一的清單。說到這，一個復雜的的基本結構和功能已經出現了。使用過一些清單類的應用程序，像 WunderList, Google Keep等，用來記錄一些計劃和安排，也試著將自己的計劃安排同筆記一起整理在 Evernote 中，但是無論哪種方式用起來總覺得少了點什么，如果兩者的一些功...

solocoder 2019-08-20 11:17 評論0 收藏0
使用 Vuex + Vue.js 構建單頁應用

摘要：鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇下的使用方法，傳送門使用構建單頁應用新篇華麗的分割線原文地址前言在最近學習的時候，看到國外一篇講述了如何使用和來構建一個簡單筆記的單頁應用的文章。鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇 vue2.0 下的 vuex 使用方法，傳送門：使用 Vuex + Vue.js 構建單頁應用【新篇】 ---------...

tomorrowwu 2019-08-19 18:42 評論0 收藏0
使用 Vuex + Vue.js 構建單頁應用

摘要：鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇下的使用方法，傳送門使用構建單頁應用新篇華麗的分割線原文地址前言在最近學習的時候，看到國外一篇講述了如何使用和來構建一個簡單筆記的單頁應用的文章。鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇 vue2.0 下的 vuex 使用方法，傳送門：使用 Vuex + Vue.js 構建單頁應用【新篇】 ---------...

cnsworder 2019-08-01 15:25 評論0 收藏0
使用 Vuex + Vue.js 構建單頁應用

摘要：鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇下的使用方法，傳送門使用構建單頁應用新篇華麗的分割線原文地址前言在最近學習的時候，看到國外一篇講述了如何使用和來構建一個簡單筆記的單頁應用的文章。鑒于該篇文章閱讀量大，回復的同學也挺多的，特地抽空寫了一篇 vue2.0 下的 vuex 使用方法，傳送門：使用 Vuex + Vue.js 構建單頁應用【新篇】 ---------...

levius 2019-08-29 10:58 評論0 收藏0