好用的Vue狀態管理模式：淺談Vuet在實際應用中解決的問題

WilsonLiu95 發布于2019-08-21 12:03 / 704人閱讀

摘要：而的狀態測試更類似于單元測試，和組件的依賴較低，組件只會存在調用模塊的方法或者讀取狀態，在組件頻繁的改動中，而的改動相對會較小，所以狀態測試便會存在一定的價值。

父子組件通信

Vuet提供了模塊化的狀態管理，通過對一個組件的注入，再向其子組件進行分發，使得我們可以在任何一個子組件，通過模塊的方法對當前模塊的狀態進行更新，再由和vuet連接的父組件對子組件進行單向數據流動。這樣我們就可以輕易的解決了父子組件的通信問題，也使得狀態測試變得異常簡單。

狀態測試


    import test from "ava"
    
    // 假設這是我們應用程序的代碼 start
    import Vue from "vue"
    import Vuet from "vuet"
    
    Vue.use(Vuet)
    
    const vuet = new Vuet({
        modules: {
            test: {
                data() {
                    return {
                        count: 0
                    }
                },
                plus() {
                    this.count++
                },
                delay() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            this.count = 1000
                            resolve()
                        }, 100)
                    })
                }
            }
        }
    })
    
    new Vue({
        vuet
    })
    // 假設這是我們應用程序的代碼 end
    
    // 接下來我們可以寫vuet的狀態測試
    test("test", async t => {
        const vtm = vuet.getModule("test")
    
        t.is(vtm.count, 0)
    
        vtm.plus()
        t.is(vtm.count, 1)
    
        await vtm.delay()
        t.is(vtm.count, 1000)
    })

上面是一個簡單的狀態測試的例子，在實際項目中，還應該包含很多http請求，我們可以使用axios模塊來和服務器進行交互，好處就是它也支持在node環境中運行，這樣我們編寫http請求相關的狀態測試變成了可能。在如今版本快遞迭代的大環境中，寫測試幾乎變成了一種很稀罕的事情，前端的測試更是少之又少。往往一個頁面中，又拆分成很多子組件，這使得測試的工作量成指數級增長，面臨著需求的頻繁改動而無能為力。而Vuet的狀態測試更類似于單元測試，和組件的依賴較低，組件只會存在調用Vuet模塊的方法或者讀取狀態，在組件頻繁的改動中，而Vuet的改動相對會較小，所以狀態測試便會存在一定的價值。

規則

在生活中，我們每天都會進行著一些重復的工作，比如每天起床之后都會刷牙、洗臉、吃早餐，這些重復而單調的工作，在Vuet中則可以教給規則來處理。
比如：
頁面url發生改變，重新請求一下數據，
模塊的狀態發生變化時，使用 localStorage做持久化處理，
組件初始化時，請求一下數據，
組件銷毀時，重置一下狀態，
每隔一段時間，幫我請求一下數據，
等等......
我們可以將這些簡單重復的工作，封裝成一個規則，然后可以使用這個規則去更新模塊的狀態



    export default {
      rule ({ path }) {
        return {
          destroyed () {
            this.$vuet.getModule(path).reset()
          }
        }
      }
    }

上面是一個非常簡單的例子，它的工作就是在組件銷毀時，重置模塊的狀態，以節省內存的占用。如果需要，我們還可以優化這個規則，在組件初始化時從localStorage中還原狀態，在組件銷毀時使用localStorage存儲狀態，然后在重置狀態。

總結

Vuet可以很好的解決了Vue.js中組件通信的問題，而且合理的運用規則，可以讓我們事半功倍。
Vuet官網：傳送門

GPU云服務器云服務器 webrtc怎么實際應用在項目中在深度學習中的應用機器學習在企業中的應用云計算的實際應用

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

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

2017-08-21 前端日報

摘要：前端日報精選移動首屏秒開優化方案探討常見布局方式編碼規范阿里前端推出新的框架譯中文第期使用的功能周刊基礎系列零之大轉盤九宮格刮刮卡抽獎插件封裝掘金技術周刊期知乎專欄與交互之技術掘金性能調優之代碼篇二錯誤棧知乎專欄進階篇 2017-08-21 前端日報精選移動 H5 首屏秒開優化方案探討CSS 常見布局方式HTML/CSS/JS編碼規范阿里前端推出新的 React 框架：Mirror...

Maxiye 2019-08-21 12:04 評論0 收藏0
Vue.js實現用戶登錄退出和e2e測試

摘要：前言本來只是想寫個實現登錄退出的例子的，但是又覺得這樣干貨太少。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機會，我們可以再討論一下使用的正確姿勢。前言本來只是想寫個Vuet實現登錄退出的例子的，但是又覺得這樣干貨太少。一個好的開源項目，少不了單元測試和e2e測試，為了保證Vuet教程的豐富性和程序的穩定性，所以我選擇了寫的例子即能當教程使用，也可以用于測試，豐富的...

MycLambert 2019-08-21 11:45 評論0 收藏0
Vue.js輕松實現頁面后退時，還原滾動位置

摘要：前言從發布之后，陸陸續續做了七八個項目，摸索出來了一套自己的狀態管理模式，我將之稱為。其實自帶的規則能夠支持同時記錄全局滾動條自身的滾動條，這樣就能大大的提升了我們的用戶體驗例子源碼官方前言從Vue.js 2.x發布之后，陸陸續續做了七八個項目，摸索出來了一套自己的狀態管理模式，我將之稱為Vuet。它以規則來驅動狀態更新，它帶來的是開發效率上的飆升，它就像草原，而你是野馬，任你隨意...

趙連江 2019-08-21 11:44 評論0 收藏0
Vue.js項目重構，輕松實現上拉加載滾動位置還原

摘要：這是基于進行狀態管理的完整項目，包含了用戶的登錄退出，路由頁面，滾動位置還原，帖子編輯狀態保存等等，麻雀雖小，卻是五臟俱全。前言上一篇《Vue.js輕松實現頁面后退時，還原滾動位置》只是簡單的實現了路由切換時進行的滾動位置還原，很多朋友就來問上拉加載怎么實現啊！于是我想起了以前做過一個叫vue-cnode的項目，于是花了兩天時間進行了重構，完全的移除了Vuex，使用了Vuet來做為...

junbaor 2019-08-20 17:23 評論0 收藏0