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

張率功發布于2019-08-20 17:34 / 2652人閱讀

摘要：事先將狀態更新的規則寫好，然后將規則注入到組件中，然后狀態按照預訂的規則來進行更新。主動型和被動型規則內置了這幾種常見的規則，除了規則外，其他都是屬于主動型更新規則，在達到一定的條件上會自動觸發狀態更新。

Vuet.js是什么？

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

主動型和被動型規則

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

life

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

manual

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



    {{ count }}

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

need

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

once

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

route

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

總結

vuet允許你將有規律的狀態更新，封裝成一種規則，從而提升你的開發效率，比如說需要定時向服務器更新消息，這也是一種規則，下次有時間，我們可以專門寫這樣的一個規則。

GPU云服務器云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83683.html

2017-06-27 前端日報

摘要：前端日報精選漫談函數式編程一十年蹤跡的博客前端每周清單的優勢與劣勢有望超越在嵌入式及物聯網的應用現狀進階系列高階組件詳解一前端之路譯如何充分利用控制臺掘金程序猿升級攻略眾成翻譯中文譯如何充分利用控制臺掘金前端從強制開啟壓縮探 2017-06-27 前端日報精選漫談 JS 函數式編程（一） - 十年蹤跡的博客前端每周清單： Vue的優勢與劣勢；Node.js有望超越Java；JS在嵌...

Eidesen 2019-08-20 17:35 評論0 收藏0
Vue.js輕松實現頁面后退時，還原滾動位置

摘要：前言從發布之后，陸陸續續做了七八個項目，摸索出來了一套自己的狀態管理模式，我將之稱為。其實自帶的規則能夠支持同時記錄全局滾動條自身的滾動條，這樣就能大大的提升了我們的用戶體驗例子源碼官方前言從Vue.js 2.x發布之后，陸陸續續做了七八個項目，摸索出來了一套自己的狀態管理模式，我將之稱為Vuet。它以規則來驅動狀態更新，它帶來的是開發效率上的飆升，它就像草原，而你是野馬，任你隨意...

趙連江 2019-08-21 11:44 評論0 收藏0
Vue.js實現用戶登錄退出和e2e測試

摘要：前言本來只是想寫個實現登錄退出的例子的，但是又覺得這樣干貨太少。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機會，我們可以再討論一下使用的正確姿勢。前言本來只是想寫個Vuet實現登錄退出的例子的，但是又覺得這樣干貨太少。一個好的開源項目，少不了單元測試和e2e測試，為了保證Vuet教程的豐富性和程序的穩定性，所以我選擇了寫的例子即能當教程使用，也可以用于測試，豐富的...

MycLambert 2019-08-21 11:45 評論0 收藏0