zoukankan      html  css  js  c++  java
  • 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允许你将有规律的状态更新,封装成一种规则,从而提升你的开发效率,比如说需要定时向服务器更新消息,这也是一种规则,下次有时间,我们可以专门写这样的一个规则。

  • 相关阅读:
    js optional chaining operator
    Linux Bash Script conditions
    Linux Bash Script loop
    js Nullish Coalescing Operator
    js sort tricks All In One
    React Portal All In One
    最小生成树&&次小生成树
    链式前向星实现以及它的遍历
    [2015.11.8|9图论]解题代码集合
    最短路算法及其延伸
  • 原文地址:https://www.cnblogs.com/10manongit/p/12883128.html
Copyright © 2011-2022 走看看