亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vuex狀態(tài)初始化中間件設(shè)計(jì)

fireflow / 1035人閱讀

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

總算把最近嘗試的東西實(shí)現(xiàn)出來了，寫點(diǎn)文章沉淀一下。

前言

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

問題

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

解決方案 
Talk is cheap, show me the code.

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

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
      }
    })
  }
}
關(guān)鍵點(diǎn)解讀 1. 深層克隆

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

2. 全局使用便捷性

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

應(yīng)用啟動時(shí)注冊


應(yīng)用全局可調(diào)用，不需要另外引入

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/80027.html

相關(guān)文章

  • Vuex — The core of Vue application

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

    Aldous 評論0 收藏0

  • 實(shí)現(xiàn)一個(gè)稍微復(fù)雜的simplelist

    摘要：是一個(gè)專門為應(yīng)用所設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。此時(shí)可以幫助我們實(shí)現(xiàn)狀態(tài)的管理。每個(gè)任務(wù)都?xì)w屬于一個(gè)清單，有唯一的清單。說到這，一個(gè)復(fù)雜的的基本結(jié)構(gòu)和功能已經(jīng)出現(xiàn)了。 使用過一些清單類的應(yīng)用程序，像 WunderList, Google Keep等，用來記錄一些計(jì)劃和安排，也試著將自己的計(jì)劃安排同筆記一起整理在 Evernote 中，但是無論哪種方式用起來總覺得少了點(diǎn)什么，如果兩者的一些功...

    solocoder 評論0 收藏0

  • 使用 Vuex + Vue.js 構(gòu)建單頁應(yīng)用

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

    tomorrowwu 評論0 收藏0

  • 使用 Vuex + Vue.js 構(gòu)建單頁應(yīng)用

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

    cnsworder 評論0 收藏0

  • 使用 Vuex + Vue.js 構(gòu)建單頁應(yīng)用

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

    levius 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<