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