Vuet.js划定规矩详解,它是你不知道的壮大功用?

Vuet.js是什么?

Vuet.js是给Vue.js供应状况治理的一个东西,与vuex差别,它是一种崇尚划定规矩定制的状况治理模式。事先将状况更新的划定规矩写好,然后将划定规矩注入到组件中,然后状况根据预订的划定规矩来举行更新。
github:Vuet.js

主动型和被动型划定规矩

Vuet.js内置了lifemanualneedonceroute这几种罕见的划定规矩,除了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许可你将有规律的状况更新,封装成一种划定规矩,从而提拔你的开辟效力,比方说须要定时向服务器更新音讯,这也是一种划定规矩,下次有时间,我们能够特地写如许的一个划定规矩。

    原文作者:狼族小狈
    原文地址: https://segmentfault.com/a/1190000009941314
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞