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

狼族小狽發表於2019-01-21
Vue模式

父子元件通訊


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

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官網：傳送門

相關文章