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