目录

vue-lever 是一个使用装饰器模式的插件来帮你管理 true/false 状态

最近一直在写 vue 相关的东西,因为毕竟是前端,所以经常会遇到一种情况就是说,我需要维护一个 true/false 状态,比如说:当按钮点击的时候,显示加载字样,然后等加载完毕之后完成显示。

首先我们考虑出现这种情况的时候,如果我们一行一行的书写,那将是非常麻烦的。

1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
data() {
return { loading: false }
}
methods: {
asyncAction() {
this.loading = true
this.$http.doing() // return a promise
.then(() => this.loading = false)
.catch(() => this.loading = false))
}
}
})

我们需要在每一个退出的情况下将 loading 状态设置为 false,这至少意味着你要写 3 遍,非常冗余。而且很容易忘记。

我们可以抽象出来,可以发现每当这种函数运行的时候,首先将相关的变量设置成 true,然后等待异步操作完成或者失败之后,再将变量设置回之前的值。

完成这个操作最简单的方式就是代理,在用户的函数调用之前设置相应的变量,在用户的函数调用完成之后,或者如果函数是异步操作,那么通过返回一个 promise 来表示异步操作。

既然讲到了代理模式,那么在 JS 中有很多,不过我们在这里通过一个 ES6 的新语法,装饰器。

话不多说,上代码

1
2
3
4
5
6
7
8
9
10
import Lever from 'vue-lever'
// import others
new Vue({
methods: {
@Lever.Lever('loading')
asyncAction() {
return this.$http.doing() // return a promise
}
}
})

这个功能和上面的那段代码是一模一样的,是不是感觉用了装饰器之后就变得特别简单了呢?

不过这里有一点需要注意的是,为了方便和隔离,我将所有的变量全都放在 levers 这个变量下面,也就是说你需要通过 levers.loading 来使用,而不是 loading

不过现在暂时没有支持回调函数的方式,也就是你必须要返回一个 promise,否则是不行的。

其次我们这里还有手动模式,也就是如果你不想用装饰器的话,你可以通过 this.$lever(name, value),来更改状态,其中 name 为变量名,value 为 true/false 值。当然这里也提供两个 alias,this.$lever.t(name)this.$lever.f(name)。方便设置变量为 true/false。

还有一些其他的参数,大家可以去 Github 网站查看。这篇文章就写到这里。

注释和共享

  • 第 1 页 共 1 页

XGHeaven

一个弱弱的码农


杭州电子科技大学学生一枚


Weifang Shandong, China