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容许你将有规律的状态更新，封装成一种规则，从而提高你的开发效率，好比说须要定时向服务器更新消息，这也是一种规则，下次有时间，咱们能够专门写这样的一个规则。