前言
本来只是想写个Vuet实现登录退出的例子的,但是又觉得这样干货太少。一个好的开源项目,少不了单元测试和e2e测试,为了保证Vuet教程的丰富性和程序的稳定性,所以我选择了写的例子即能当教程使用,也可以用于测试,丰富的应用场景和测试,能保证日后的版本迭代不会因为修复了一个bug而引发了一大堆bug的尴尬。
源码地址
运行Vuet项目
git clone https://github.com/medevicex/vuet.git
npm install
npm run dev
npm run dev:test # 运行测试,需要电脑本地安装firefox和chrome浏览器复制代码
开始
哈哈,上面直接抛源码地址,感觉也是挺尴尬的,我们先分析一下我们这个登录退出所需要所的功能
- 登录页面,用户信息页面,是两个不同的页面,就涉及到了多组件状态共享
- 我期望用户在已登录的情况下,每次到用户信息页面时,先渲染本地的用户信息,然后再去请求服务器更新本地的用户信息
- 将登录退出的方法,集中起来管理,方面在在各个组件中调用
多组件共享状态和方法
Vuet提供了全局的mapModules方法,可以让我们连接到挂载在Vue实例上的Vuet实例
ages/Home.vue
import { mapRules, mapModules } from 'vuet'
export default {
mixins: [
// manual:规则,可以将通用的更新模块状态的方法集中起来,
// 可以理解成vuex中的action,只不过他是可以允许在里面更改模块状态的
// need 规则,会在组件每一次的beforeCreate钩子中,发送请求更新一次用户的信息
mapRules({ manual: 'user', need: 'user' }),
// 连接用户模块
mapModules({ user: 'user' })
]
}复制代码
定义一个user模块
vuet/user.js
export default {
data () {
// 一个Object对象中,是否有data方法,是构成Vuet.js一个模块的依据
// 当你调用reset方法时,将会重置整个模块的状态
// 例如在组件中:this.$vuet.reset('模块名称')
return {
name: null,
age: null,
sex: null,
count: 0
}
},
async fetch ({ state }) {
// 当need规则触发更新时,出调用一次fetch方法更新
// 我们可以在这里直接更改state,也可以return一个Object对象来更新状态
// 在实际项目中,用户未登录时,我们并不需要向服务器发送真正的请求
// 所以我们可以判断一下用户的名称是否存在,否则的话不向服务器进行真正的请求
if (state.name === null) return
// 下面数据因为是模拟的,所以就直接return好了
return {
name: 'Vuet',
age: 18,
sex: 'male',
count: ++state.count
}
},
// 注:你要在组件中使用manual规则才能向组件注入这些方法
// 例如:mapRules({ manual: '模块名称' })
// 调用:this.$模块名称.xxx()
manuals: {
async signin ({ state }, from) { // 定义了一个登录的方法
if (from.name === 'Vuet' && from.pass === '2017') {
return {
success: true,
msg: 'Login was successful',
data: {
name: 'Vuet',
age: 18,
sex: 'male',
count: ++state.count
}
}
}
return {
success: false,
msg: 'Logon failure',
data: null
}
},
async sigout () {
// 用户选择退出后,直接调用reset的方法即可重置用户信息
this.reset()
}
}
}复制代码
实现用户登录
pages/Signin.vue
<template>
<div class="inner">
<b class="msg" style="color:red" v-if="msg">{{ msg }}</b>
<form @submit.prevent="submit">
<div>
<label>User name:<input class="name" type="text" v-model="form.name"></label>
</div>
<div>
<label>Password:<input class="pass" type="password" v-model="form.pass"></label>
</div>
<button>Signin</button>
</form>
</div>
</template>
<script>
import { mapRules, mapModules } from 'vuet'
export default {
mixins: [
// 使用manual规则取得user模块里面manuals的方法
mapRules({ manual: 'user' }),
// 连接用户的模块信息
mapModules({ user: 'user' })
],
data () {
return {
msg: null,
form: {
name: null,
pass: null
}
}
},
methods: {
async submit () {
const res = await this.$user.signin(this.form)
this.msg = res.msg
if (res.success) {
// 登录成功后,直接赋值更新用户信息
this.user = res.data
setTimeout(() => {
this.$router.replace({ name: 'home' })
}, 500)
}
}
}
}
</script>
<style scoped>
</style>复制代码
总结
其实教程并没有写得特别详细的过程,主要是为了体现出Vuet一种开放的姿态,它可以在任意组件直接对模块的状态进行直接的赋值更新,也可以使用类似action的方法进行更新,它可以让你为所欲为,用得好的人可以让你开发的效率飙升,用得不好,也会导致你程序中的状态难以追踪变化的记录。哈哈,不小心被吓到了吧,其实这些都是有办法可以解决的,下次有机会,我们可以再讨论一下使用Vuet的正确姿势。