Vuet.js規則詳解，它是你不知道的強大功能？

Vuet.js是什麼？

Vuet.js是給Vue.js提供狀態管理的一個工具，與vuex不一樣，它是一種崇尚規則定製的狀態管理模式。事先將狀態更新的規則寫好，而後將規則注入到組件中，而後狀態按照預訂的規則來進行更新。
github:Vuet.js

主動型和被動型規則

Vuet.js內置了life、manual、need、once、route這幾種常見的規則，除了manual規則外，其餘都是屬於主動型更新規則，在達到必定的條件上會自動觸發狀態更新。

life

描述: 每次都會在組件的beforeCreate鉤子中調用一次更新，組件銷燬時在destroyed鉤子，狀態會被重置，恢復到初始狀態
在一個父組件中，想和本身的子子組件進行通訊，可是又不但願父組件銷燬以後，原來的狀態還在，life規則就是專門針對這種場景的，在組件銷燬時，模塊的狀態也會隨之恢復到初始狀態

manual

manual規則容許將各類更新模塊狀態的方法集中起來管理，等待用戶來手動觸發對應的模塊更新，好比記錄用戶點擊一個按鈕的次數：

<!--index.html-->
<div id="app">
    {{ count }}
    <button @click="$count.plus">計數</button>
</div>
<script> // main.js import Vue from 'vue' import Vuet, { mapModules, mapRules } from 'vuet' const vuet = new Vuet({ modules: { count: { data () { return 0 }, manuals: { plus ({ state }) { // 容許同步、或者異步的更新 this.setState(++state) } } } } }) export default new Vue({ el: '#app', vuet, // vuet實例注入到vue實例 mixins: [ mapModules({ count: 'count' }), // 組件鏈接模塊 mapRules({ manual: 'count' // 使用manual規則向組件注入操做模塊數據的更新方法 }) ] }) </script>複製代碼

經過上面的代碼，就能夠得知Vuet.js是自然的支持多組件進行通訊，總之它是簡單的，敏捷的。manual規則默認以$模塊名稱將方法集合注入到組件中，使得代碼在閱讀方面會更友好，更通俗易懂，同時代碼也會更優雅。

need

描述: 每次都會在組件的beforeCreate鉤子中調用一次更新
好比有一個消息的數量，我但願每次打開消息頁面的時候，消息數量都能自動更新，這種場景使用need規則就再合適不過了

once

描述: 僅第一次在組件的beforeCreate鉤子中調用一次更新，以後在任何組件都不會再進行更新
好比你A、B、C三個頁面，都須要選擇省市區，而這些數據幾乎是不可變的，因此以後就沒有再必要進行更新了。once的規則就能幫你節省了沒必要要的請求，幫你優化程序

route

哈哈，這個篇幅有點大，等下次專門開篇文章進行講解。

總結

vuet容許你將有規律的狀態更新，封裝成一種規則，從而提高你的開發效率，好比說須要定時向服務器更新消息，這也是一種規則，下次有時間，咱們能夠專門寫這樣的一個規則。