好用的Vue状态管理模式：浅谈Vuet在实际应用中解决的问题

WilsonLiu95 发布于2019-08-21 12:03 / 701人阅读

摘要：而的状态测试更类似于单元测试，和组件的依赖较低，组件只会存在调用模块的方法或者读取状态，在组件频繁的改动中，而的改动相对会较小，所以状态测试便会存在一定的价值。

父子组件通信

Vuet提供了模块化的状态管理，通过对一个组件的注入，再向其子组件进行分发，使得我们可以在任何一个子组件，通过模块的方法对当前模块的状态进行更新，再由和vuet连接的父组件对子组件进行单向数据流动。这样我们就可以轻易的解决了父子组件的通信问题，也使得状态测试变得异常简单。

状态测试


    import test from "ava"
    
    // 假设这是我们应用程序的代码 start
    import Vue from "vue"
    import Vuet from "vuet"
    
    Vue.use(Vuet)
    
    const vuet = new Vuet({
        modules: {
            test: {
                data() {
                    return {
                        count: 0
                    }
                },
                plus() {
                    this.count++
                },
                delay() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            this.count = 1000
                            resolve()
                        }, 100)
                    })
                }
            }
        }
    })
    
    new Vue({
        vuet
    })
    // 假设这是我们应用程序的代码 end
    
    // 接下来我们可以写vuet的状态测试
    test("test", async t => {
        const vtm = vuet.getModule("test")
    
        t.is(vtm.count, 0)
    
        vtm.plus()
        t.is(vtm.count, 1)
    
        await vtm.delay()
        t.is(vtm.count, 1000)
    })

上面是一个简单的状态测试的例子，在实际项目中，还应该包含很多http请求，我们可以使用axios模块来和服务器进行交互，好处就是它也支持在node环境中运行，这样我们编写http请求相关的状态测试变成了可能。在如今版本快递迭代的大环境中，写测试几乎变成了一种很稀罕的事情，前端的测试更是少之又少。往往一个页面中，又拆分成很多子组件，这使得测试的工作量成指数级增长，面临着需求的频繁改动而无能为力。而Vuet的状态测试更类似于单元测试，和组件的依赖较低，组件只会存在调用Vuet模块的方法或者读取状态，在组件频繁的改动中，而Vuet的改动相对会较小，所以状态测试便会存在一定的价值。

规则

在生活中，我们每天都会进行着一些重复的工作，比如每天起床之后都会刷牙、洗脸、吃早餐，这些重复而单调的工作，在Vuet中则可以教给规则来处理。
比如：
页面url发生改变，重新请求一下数据，
模块的状态发生变化时，使用 localStorage做持久化处理，
组件初始化时，请求一下数据，
组件销毁时，重置一下状态，
每隔一段时间，帮我请求一下数据，
等等......
我们可以将这些简单重复的工作，封装成一个规则，然后可以使用这个规则去更新模块的状态



    export default {
      rule ({ path }) {
        return {
          destroyed () {
            this.$vuet.getModule(path).reset()
          }
        }
      }
    }

上面是一个非常简单的例子，它的工作就是在组件销毁时，重置模块的状态，以节省内存的占用。如果需要，我们还可以优化这个规则，在组件初始化时从localStorage中还原状态，在组件销毁时使用localStorage存储状态，然后在重置状态。

总结

Vuet可以很好的解决了Vue.js中组件通信的问题，而且合理的运用规则，可以让我们事半功倍。
Vuet官网：传送门

云服务器 GPU云服务器 webrtc怎么实际应用在项目中在深度学习中的应用机器学习在企业中的应用云计算的实际应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87392.html

2017-08-21 前端日报

摘要：前端日报精选移动首屏秒开优化方案探讨常见布局方式编码规范阿里前端推出新的框架译中文第期使用的功能周刊基础系列零之大转盘九宫格刮刮卡抽奖插件封装掘金技术周刊期知乎专栏与交互之技术掘金性能调优之代码篇二错误栈知乎专栏进阶篇 2017-08-21 前端日报精选移动 H5 首屏秒开优化方案探讨CSS 常见布局方式HTML/CSS/JS编码规范阿里前端推出新的 React 框架：Mirror...

Maxiye 2019-08-21 12:04 评论0 收藏0
Vue.js实现用户登录退出和e2e测试

摘要：前言本来只是想写个实现登录退出的例子的，但是又觉得这样干货太少。哈哈，不小心被吓到了吧，其实这些都是有办法可以解决的，下次有机会，我们可以再讨论一下使用的正确姿势。前言本来只是想写个Vuet实现登录退出的例子的，但是又觉得这样干货太少。一个好的开源项目，少不了单元测试和e2e测试，为了保证Vuet教程的丰富性和程序的稳定性，所以我选择了写的例子即能当教程使用，也可以用于测试，丰富的...

MycLambert 2019-08-21 11:45 评论0 收藏0
Vue.js轻松实现页面后退时，还原滚动位置

摘要：前言从发布之后，陆陆续续做了七八个项目，摸索出来了一套自己的状态管理模式，我将之称为。其实自带的规则能够支持同时记录全局滚动条自身的滚动条，这样就能大大的提升了我们的用户体验例子源码官方前言从Vue.js 2.x发布之后，陆陆续续做了七八个项目，摸索出来了一套自己的状态管理模式，我将之称为Vuet。它以规则来驱动状态更新，它带来的是开发效率上的飙升，它就像草原，而你是野马，任你随意...

赵连江 2019-08-21 11:44 评论0 收藏0
Vue.js项目重构，轻松实现上拉加载滚动位置还原

摘要：这是基于进行状态管理的完整项目，包含了用户的登录退出，路由页面，滚动位置还原，帖子编辑状态保存等等，麻雀虽小，却是五脏俱全。前言上一篇《Vue.js轻松实现页面后退时，还原滚动位置》只是简单的实现了路由切换时进行的滚动位置还原，很多朋友就来问上拉加载怎么实现啊！于是我想起了以前做过一个叫vue-cnode的项目，于是花了两天时间进行了重构，完全的移除了Vuex，使用了Vuet来做为...

junbaor 2019-08-20 17:23 评论0 收藏0