当前位置: 首页 > news >正文

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

父子组件通信



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官网:传送门

转载于:https://juejin.im/post/599830a26fb9a02481204b0e

相关文章:

  • Android 解决 View 的滑动冲突
  • RabbitMQ-Java版本生产与消费
  • Ajax学习(一)
  • window对象
  • saltstack常用远程命令
  • vuex,vue问题汇集(一)
  • ERROR   OGG-01161 Bad column index (15) specified for table
  • HNUSTOJ-1520 压缩编码
  • java json与map互相转换(一)
  • 『TensotFlow』RNN中文文本_上
  • 高并发网络编程之epoll详解(转载)
  • AdTime:DMC多层面助力企业咨询
  • JSP页面出现乱码
  • Linux 破坏性修复
  • String,StringBuffer ,StringBuilder的区别
  • 《Java8实战》-第四章读书笔记(引入流Stream)
  • Django 博客开发教程 16 - 统计文章阅读量
  • git 常用命令
  • python 装饰器(一)
  • React 快速上手 - 07 前端路由 react-router
  • Vim 折腾记
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 那些被忽略的 JavaScript 数组方法细节
  • 前端面试题总结
  • 如何编写一个可升级的智能合约
  • 微服务入门【系列视频课程】
  • 昨天1024程序员节,我故意写了个死循环~
  • ​香农与信息论三大定律
  • !!java web学习笔记(一到五)
  • #162 (Div. 2)
  • #控制台大学课堂点名问题_课堂随机点名
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • (3)llvm ir转换过程
  • (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (DenseNet)Densely Connected Convolutional Networks--Gao Huang
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)springboot工单管理系统 毕业设计 964158
  • (十八)三元表达式和列表解析
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)Windows2003安全设置/维护
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .bat批处理(七):PC端从手机内复制文件到本地
  • .Net Core缓存组件(MemoryCache)源码解析
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .NET 动态调用WebService + WSE + UsernameToken
  • .NET文档生成工具ADB使用图文教程
  • .net中生成excel后调整宽度
  • @ 代码随想录算法训练营第8周(C语言)|Day53(动态规划)
  • [ C++ ] STL_vector -- 迭代器失效问题
  • [2008][note]腔内级联拉曼发射的,二极管泵浦多频调Q laser——
  • [Angular] 笔记 6:ngStyle
  • [C++] 多线程编程-thread::yield()-sleep_for()
  • [C++数据结构](31)哈夫曼树,哈夫曼编码与解码
  • [CF]Codeforces Round #551 (Div. 2)