父子組件通信

Alt text

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